.elementor-kit-9{--e-global-color-primary:#14171F;--e-global-color-secondary:#5B6370;--e-global-color-text:#14171F;--e-global-color-accent:#3D4FE0;--e-global-color-f61ba90:#6E7DF7;--e-global-color-b681b04:#FFFFFF;--e-global-color-3b8b3f6:#F6F7F9;--e-global-color-e41ac59:#E3E6EB;--e-global-color-5c4548e:#868E9B;--e-global-color-6513756:#8D96A5;--e-global-typography-primary-font-family:"Glacial Indifference";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0px;background-color:#FFFFFF;color:#14171F;font-family:"Inter", Sans-serif;font-size:17px;font-weight:400;line-height:1.6em;}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{background-color:#14171F;font-family:"Inter", Sans-serif;font-size:16px;font-weight:500;line-height:1em;color:#FFFFFF;border-radius:999px 999px 999px 999px;padding:8px 8px 8px 26px;}.elementor-kit-9 button:hover,.elementor-kit-9 button:focus,.elementor-kit-9 input[type="button"]:hover,.elementor-kit-9 input[type="button"]:focus,.elementor-kit-9 input[type="submit"]:hover,.elementor-kit-9 input[type="submit"]:focus,.elementor-kit-9 .elementor-button:hover,.elementor-kit-9 .elementor-button:focus{background-color:#14171F;color:#FFFFFF;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 a{color:#14171F;}.elementor-kit-9 a:hover{color:#3D4FE0;}.elementor-kit-9 h1{font-family:"Glacial Indifference", Sans-serif;font-size:clamp(44px, 5.6vw, 84px);font-weight:700;line-height:0.98em;letter-spacing:-0.02em;}.elementor-kit-9 h2{font-family:"Glacial Indifference", Sans-serif;font-size:clamp(36px, 4.2vw, 56px);font-weight:700;line-height:1.04em;letter-spacing:-0.012em;}.elementor-kit-9 h3{font-family:"Glacial Indifference", Sans-serif;font-size:26px;font-weight:700;line-height:1.1em;}.elementor-kit-9 h4{font-family:"Glacial Indifference", Sans-serif;font-size:24px;font-weight:700;line-height:1.15em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:960px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:760px){.elementor-kit-9 h1{font-size:44px;letter-spacing:-0.02em;}.elementor-kit-9 h2{font-size:36px;letter-spacing:-0.012em;}.elementor-kit-9 h3{font-size:24px;}.elementor-kit-9 h4{font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================================
   Space4Next — custom CSS for Elementor
   Paste this whole file into: Elementor > Site Settings > Custom CSS.
   Every class below is already set on the right element inside the
   template JSON files (Advanced > CSS Classes). The table in README.md
   lists which class sits on which element, in case you rebuild by hand.
   Breakpoints match the prototype: tablet <= 960px, mobile <= 760px.
   ===================================================================== */

/* Colour tokens read the Elementor Global Colours (Site Settings > Global Colors), so a colour changed
   there changes here too. The hex after each comma is the fallback if a global is ever deleted.
   They sit on body, not :root, because Elementor defines --e-global-color-* on body.elementor-kit-9. */
body {
  --s4n-graphite: var(--e-global-color-primary, #14171F);
  --s4n-muted: var(--e-global-color-secondary, #5B6370);
  --s4n-indigo: var(--e-global-color-accent, #3D4FE0);
  --s4n-indigo-dark: var(--e-global-color-f61ba90, #6E7DF7);   /* indigo on dark surfaces only */
  --s4n-white: var(--e-global-color-b681b04, #FFFFFF);
  --s4n-space-white: var(--e-global-color-3b8b3f6, #F6F7F9);
  --s4n-hairline: var(--e-global-color-e41ac59, #E3E6EB);
  --s4n-ash: var(--e-global-color-5c4548e, #868E9B);
  --s4n-orbit: var(--e-global-color-6513756, #8D96A5);
  --s4n-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --s4n-section: clamp(56px, 6.5vw, 96px);
  --s4n-arrow-ur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11l6-6M6 5h5v5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --s4n-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

::selection { background: rgba(61, 79, 224, 0.16); color: var(--s4n-graphite); }
/* brand focus ring; !important because Astra's thin dotted a:focus-visible outline otherwise wins */
:focus-visible { outline: 2px solid var(--s4n-indigo) !important; outline-offset: 4px; border-radius: 12px; }
html { scroll-padding-top: 96px; }
/* Astra's scroll-to-top button is not part of the design (turn it off in Customizer > Global > Scroll to Top as well) */
#ast-scroll-top { display: none !important; }

/* ---------- Shared pieces ---------- */

/* section heading and lead hold a fixed measure (DESIGN.md: Headline 21ch, Lead 54ch); head sits clamp(48px, 6vw, 88px) above the content */
.elementor-widget-heading h2.elementor-heading-title { max-width: 21ch; text-wrap: balance; }
/* fluid heading sizes from DESIGN.md. The templates set fixed desktop sizes (56/44/48px), which stayed
   at full size down to 761px and pushed the Founder About heading to six lines on tablets. */
#portfolio h2.elementor-heading-title, .s4n-fsec h2.elementor-heading-title { font-size: clamp(36px, 4.2vw, 56px) !important; }   /* Headline */
.s4n-approach h2.elementor-heading-title { font-size: clamp(32px, 3.1vw, 44px) !important; }   /* Headline Statement */
.s4n-glass h2.elementor-heading-title { font-size: clamp(32px, 3.4vw, 48px) !important; }   /* Headline Contact */
#portfolio > .e-con-inner > .e-con:first-child .elementor-widget-text-editor { max-width: 54ch; text-wrap: pretty; }
#portfolio > .e-con-inner > .e-con:first-child { padding-bottom: clamp(24px, calc(6vw - 24px), 64px) !important; }

/* the theme adds a bottom margin to the last paragraph of every Text Editor; spacing comes from the container gaps instead */
.elementor-widget-text-editor p { margin: 0 0 0.8em; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
/* the mailto link has no arrow (DESIGN.md Text Links) */
.s4n-link a[href^="mailto:"]::after { display: none; }
/* founder statement sits 40-56px under the identity block (16px container gap + this margin) */
.s4n-statement { margin-top: clamp(24px, 2.8vw, 40px) !important; }
/* facts and portfolio cards: shell and core fill the card so every card in a row shares one height
   (portfolio cards were missing this: the "Whatever comes next." card was shorter than its row) */
.s4n-fcard > .e-con, .s4n-fcard > .e-con > .e-con,
.s4n-card > .e-con, .s4n-card > .e-con > .e-con { flex-grow: 1; }
/* role rows sit flush; the hairlines between them are the only separation */
.s4n-rglass.e-con { row-gap: 0 !important; --row-gap: 0px; }

/* home hero opens 16% of the screen height from the top, between 128px and 176px (DESIGN.md Layout) */
.elementor-element-d81fee4.e-con { --padding-top: clamp(128px, 16vh, 176px) !important; }

/* small muted label (Heading widget set to <p>) */
.s4n-label .elementor-heading-title { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--s4n-muted); }

/* text link with arrow: add to a Text Editor or Heading whose content is one link.
   The 404 template (Theme Builder, V4 widgets, which cannot take custom classes) gets the same style
   through [data-elementor-type="error-404"] p a. */
.s4n-link a, [data-elementor-type="error-404"] p a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--s4n-graphite); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--s4n-hairline); text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: color 0.4s var(--s4n-ease), text-decoration-color 0.4s var(--s4n-ease);
}
.s4n-link a::after, [data-elementor-type="error-404"] p a::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: var(--s4n-arrow-r) center / contain no-repeat; mask: var(--s4n-arrow-r) center / contain no-repeat;
  transition: transform 0.5s var(--s4n-ease);
}
.s4n-link--out a::after { -webkit-mask-image: var(--s4n-arrow-ur); mask-image: var(--s4n-arrow-ur); }
.s4n-link--indigo-arrow a::after { background: var(--s4n-indigo); }
.s4n-link a:hover, [data-elementor-type="error-404"] p a:hover { color: var(--s4n-indigo); text-decoration-color: currentColor; }
.s4n-link a:hover::after, [data-elementor-type="error-404"] p a:hover::after { transform: translateX(3px); }

/* ownership / focus tag (Heading widget set to <span>) */
.s4n-tag .elementor-heading-title {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--s4n-space-white); box-shadow: inset 0 0 0 1px var(--s4n-hairline);
  font-size: 12.5px; font-weight: 500; line-height: 1.3; color: var(--s4n-muted);
}
.s4n-tag--next .elementor-heading-title { color: var(--s4n-indigo); background: rgba(61, 79, 224, 0.06); box-shadow: inset 0 0 0 1px rgba(61, 79, 224, 0.2); }

/* ---------- 1. Header bar ---------- */

/* the header floats over the page (fixed), like the prototype; it takes no space at the top */
.s4n-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 99; background: transparent !important; pointer-events: none; }
.s4n-header .s4n-nav { pointer-events: auto; max-width: 100%; }
body.admin-bar .s4n-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .s4n-header { top: 46px; } }

.s4n-nav {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 0 0 1px rgba(20, 23, 31, 0.06), 0 14px 34px -16px rgba(20, 23, 31, 0.2);
}
.s4n-nav .elementor-nav-menu--main .elementor-item { border-radius: 9px; padding: 11px 16px; color: var(--s4n-muted); font-size: 14.5px; font-weight: 500; }
.s4n-nav .elementor-nav-menu--main .elementor-item:hover,
.s4n-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { background: var(--s4n-space-white); color: var(--s4n-graphite); }
.s4n-nav .elementor-menu-toggle { border-radius: 9px; background: var(--s4n-space-white); }

/* phone menu (<= 760px): the Nav Menu dropdown becomes a full-screen white menu, links in Glacial 700 44px.
   The bar's backdrop-filter would trap the fixed overlay inside the bar, so it is switched off while open. */
@media (max-width: 760px) {
  .s4n-nav .elementor-menu-toggle { position: relative; z-index: 3; width: auto; height: 40px; padding: 0 4px 0 14px; gap: 10px;
    display: inline-flex; align-items: center; font: 500 14.5px/1 Inter, system-ui, sans-serif; color: var(--s4n-graphite); }
  .s4n-nav .elementor-menu-toggle::before { content: "Menu"; }
  .s4n-nav .elementor-menu-toggle, .s4n-nav .elementor-menu-toggle:hover, .s4n-nav .elementor-menu-toggle.elementor-active { color: var(--s4n-graphite) !important; }
  .s4n-nav .elementor-menu-toggle svg { box-sizing: content-box; width: 14px !important; height: 14px !important; padding: 9px; border-radius: 50%; background: var(--s4n-graphite); fill: var(--s4n-white) !important; }
  .s4n-nav .elementor-widget-image { position: relative; z-index: 3; }
  .s4n-nav:has(.elementor-menu-toggle.elementor-active) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--s4n-white) !important; box-shadow: none; }
  .s4n-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0; width: 100vw !important; margin: 0 !important;
    background: var(--s4n-white); box-shadow: none; z-index: 1;
  }
  .s4n-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    height: 100vh; height: 100dvh; max-height: none !important; overflow-y: auto; padding: 112px 20px 40px;
  }
  .s4n-nav .elementor-nav-menu--dropdown a.elementor-item,
  .s4n-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
  .s4n-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
    font-family: "Glacial Indifference", Inter, system-ui, sans-serif !important; font-weight: 700 !important;
    font-size: 44px !important; line-height: 1.15; letter-spacing: -0.01em;
    padding: 3px 0 !important; background: transparent !important; color: var(--s4n-graphite) !important; border: 0;
  }
  .s4n-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
  .s4n-nav .elementor-nav-menu--dropdown a.elementor-item:focus-visible { color: var(--s4n-indigo) !important; }
  .s4n-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li { animation: s4n-menu-in .6s var(--s4n-ease) both; }
  .s4n-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(2) { animation-delay: 60ms; }
  .s4n-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(3) { animation-delay: 120ms; }
  .s4n-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container li:nth-child(4) { animation-delay: 180ms; }
}
@keyframes s4n-menu-in { from { opacity: 0; transform: translateY(12px); } }

/* phone menu email (Text Editor widget in the header): hidden except at the foot of the open full-screen menu.
   Home shows hello@, the Founder page (page id 59) shows nayeem@, as in the prototype. */
.s4n-menu-mail { display: none !important; }
@media (max-width: 760px) {
  .s4n-nav:has(.elementor-menu-toggle.elementor-active) .s4n-menu-mail {
    display: block !important; position: fixed; left: 20px; right: 20px; bottom: 32px; z-index: 2; margin: 0;
    animation: s4n-menu-in .6s var(--s4n-ease) 240ms both;
  }
  .s4n-menu-mail a { font-size: 16px; color: var(--s4n-muted); text-decoration: underline; text-decoration-color: var(--s4n-hairline); text-underline-offset: 6px; }
  .s4n-menu-mail a:hover { color: var(--s4n-indigo); text-decoration-color: currentColor; }
  /* Founder page ID 59 - update if the page is recreated. */
  .s4n-menu-mail .s4n-mail-founder, body.page-id-59 .s4n-menu-mail .s4n-mail-home { display: none; }
  body.page-id-59 .s4n-menu-mail .s4n-mail-founder { display: inline; }
}

/* ---------- 2. Primary button (Button widget, icon after the text) ---------- */

.s4n-btn .elementor-button {
  border-radius: 999px; padding: 8px 8px 8px 26px; background: var(--s4n-graphite);
  box-shadow: 0 14px 30px -14px rgba(20, 23, 31, 0.45);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.s4n-btn .elementor-button-content-wrapper { align-items: center; gap: 16px; }
.s4n-btn .elementor-button-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--s4n-indigo); color: var(--s4n-white); margin: 0 !important; transition: transform 0.5s var(--s4n-ease);
}
.s4n-btn .elementor-button:hover .elementor-button-icon { transform: translateY(2px) scale(1.06); }
.s4n-btn .elementor-button:active { transform: scale(0.98); }

/* ---------- 3. Home hero: staircase headline ---------- */

/* the widget must span the container, or the three words cannot step across it */
.s4n-stair { align-self: stretch !important; width: 100%; }
/* the templates set fixed sizes on these two H1s; DESIGN.md sizes are fluid, so they are enforced here */
.s4n-stair .elementor-heading-title { font-size: clamp(68px, min(10.4vw, 16vh), 150px) !important; }
.s4n-hero-grid h1.elementor-heading-title { font-size: clamp(44px, 5.6vw, 84px) !important; }
.s4n-stair .elementor-heading-title { display: flex; flex-direction: column; line-height: 0.92; letter-spacing: -0.025em; }
.s4n-stair .s1 { align-self: flex-start; color: var(--s4n-ash); }
.s4n-stair .s2 { align-self: center; color: var(--s4n-muted); }
.s4n-stair .s3 { align-self: flex-end; color: var(--s4n-graphite); }
.s4n-stair .sc {
  display: inline-block; position: relative; top: -0.58em; width: 0.27em; height: 0.27em; margin-left: 0.04em;
  background: var(--s4n-indigo); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .s4n-stair .s1, .s4n-stair .s2, .s4n-stair .s3 { animation: s4n-rise 0.9s var(--s4n-ease) both; }
  .s4n-stair .s2 { animation-delay: 0.14s; }
  .s4n-stair .s3 { animation-delay: 0.28s; }
  .s4n-stair .sc { animation: s4n-corner-in 0.9s var(--s4n-ease) 1.05s both; }
}
@keyframes s4n-rise { from { opacity: 0; transform: translateY(0.22em); } }
@keyframes s4n-corner-in { from { opacity: 0; transform: translate(-0.14em, 0.14em); } }

/* ---------- 4. Cards (portfolio, facts, Next) ----------
   Structure: card (wrapper) > card__shell > card__core.
   The indigo corner is drawn by the wrapper's ::after, so no extra element is needed. */

.s4n-card, .s4n-fcard, .s4n-panel {
  position: relative;
  filter: drop-shadow(0 0 0.8px rgba(20, 23, 31, 0.3)) drop-shadow(0 14px 22px rgba(20, 23, 31, 0.06));
}
a.s4n-card { transition: transform 0.6s var(--s4n-ease); }
a.s4n-card:hover { transform: translateY(-3px); }
.s4n-card__shell {
  padding: 6px !important; border-radius: 20px; background: var(--s4n-space-white);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.s4n-card__core {
  padding: 24px 24px 20px !important; border-radius: 15px; background: var(--s4n-white);
  box-shadow: inset 0 1px 2px rgba(20, 23, 31, 0.05);
  clip-path: polygon(0 0, calc(100% - 24.5px) 0, 100% 24.5px, 100% 100%, 0 100%);
}
.s4n-fcard .s4n-card__core { padding: 22px !important; }
.s4n-card::after, .s4n-fcard::after, .s4n-panel::after, .s4n-portrait::after, .s4n-principle-wrap::after, .s4n-rglass::after {
  content: ""; position: absolute; top: 0; right: 0; width: 28px; height: 28px; z-index: 2; pointer-events: none;
  background: var(--s4n-indigo); clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: transform 0.7s var(--s4n-ease), opacity 0.3s var(--s4n-ease);
}
.s4n-card::after, .s4n-fcard::after { opacity: 0; }
a.s4n-card:hover::after, a.s4n-card:focus-visible::after, .s4n-fcard:hover::after { opacity: 1; transform: translate(6px, -6px); }
.s4n-card--next::after, .s4n-panel::after, .s4n-portrait::after, .s4n-principle-wrap::after, .s4n-rglass::after { opacity: 1; transform: translate(6px, -6px); }

.s4n-grid-3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.s4n-grid-3 > .e-con { width: auto !important; }
.s4n-card-logo { height: 48px; margin-bottom: 22px; justify-content: flex-start !important; }
.s4n-card-logo img { max-height: 48px; width: auto; object-fit: contain; }
/* the foot wraps (link under the tag) when a long domain does not fit, e.g. premiumtechpanda.com at 961-1010px */
.s4n-card__foot { margin-top: auto !important; padding-top: 20px !important; --flex-wrap: wrap; flex-wrap: wrap !important; row-gap: 8px; }
.s4n-card-domain .elementor-heading-title { display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-decoration-color: var(--s4n-hairline); text-underline-offset: 5px; transition: color 0.4s var(--s4n-ease); }
.s4n-card-domain .elementor-heading-title::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--s4n-arrow-ur) center / contain no-repeat; mask: var(--s4n-arrow-ur) center / contain no-repeat; }
a.s4n-card:hover .s4n-card-domain .elementor-heading-title { color: var(--s4n-indigo); text-decoration-color: currentColor; }

/* ---------- 5. Home approach: statement + stepped line ---------- */

.s4n-approach { display: grid !important; grid-template-columns: 2fr 1fr 1fr 1fr; column-gap: 24px; align-items: start; }
.s4n-approach > .e-con, .s4n-approach > .elementor-element { width: auto !important; }
.s4n-step { position: relative; padding-top: 16px !important; border-top: 1px solid var(--s4n-line, var(--s4n-ash)); }
.s4n-step--1 { --s4n-line: var(--s4n-ash); }
.s4n-step--2 { --s4n-line: var(--s4n-muted); margin-top: 24px !important; }
.s4n-step--3 { --s4n-line: var(--s4n-graphite); margin-top: 48px !important; }
.s4n-step--2::before, .s4n-step--3::before {
  content: ""; position: absolute; left: -24px; top: -25px; width: 24px; height: 24px;
  border-left: 1px solid var(--s4n-line); border-bottom: 1px solid var(--s4n-line);
}

/* ---------- 6. Home founder note panel (40/60 split inside) ---------- */

.s4n-panel .s4n-card__core { padding: clamp(24px, 4vw, 48px) !important; }
.s4n-split-40 { display: grid !important; grid-template-columns: calc(40% - 40px) minmax(0, 1fr); column-gap: 24px; align-items: start; }

/* ---------- 7. Charcoal contact + footer ---------- */

.s4n-dark { position: relative; overflow: hidden; isolation: isolate; background: var(--s4n-graphite) !important; }
.s4n-dark::before {   /* soft indigo Forward Corner behind the glass */
  content: ""; position: absolute; z-index: -1; top: -12% !important; right: -40px !important; left: auto !important; bottom: auto !important;
  width: min(620px, 70vw) !important; height: auto !important; aspect-ratio: 1;
  background: linear-gradient(to bottom left, var(--s4n-indigo-dark) 50%, transparent 50%);
  filter: blur(22px); opacity: 0.55; pointer-events: none;
}
.s4n-dark :focus-visible { outline-color: var(--s4n-indigo-dark) !important; }
.s4n-glass {
  display: grid !important; grid-template-columns: minmax(0, 1fr) 427px; column-gap: 24px; row-gap: 12px;
  padding: clamp(28px, 4vw, 48px) !important; border-radius: 22px;
  background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
}
.s4n-glass > .e-con { width: auto !important; }
.s4n-mail .elementor-heading-title a { display: inline-flex; align-items: center; gap: 14px; color: var(--s4n-white); }
.s4n-mail .elementor-heading-title a::after {
  content: ""; width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11l6-6M6 5h5v5' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.5s var(--s4n-ease), background-color 0.5s var(--s4n-ease);
}
.s4n-mail .elementor-heading-title a:hover::after { transform: translate(2px, -2px) scale(1.05); background-color: var(--s4n-indigo-dark); }
.s4n-dark .s4n-link a { color: rgba(255, 255, 255, 0.88); text-decoration-color: rgba(255, 255, 255, 0.25); }
.s4n-dark .s4n-link a:hover { color: var(--s4n-white); text-decoration-color: var(--s4n-indigo-dark); }
.s4n-footrow { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.s4n-footrow a { color: inherit; text-decoration: none; }
.s4n-footrow a:hover { color: var(--s4n-white); }
/* footer row items (footers 48 and 49): each item stays on one line and a separator dot can only end a line, never start one.
   On phones the "Founder on LinkedIn" link moves to its own line and the dot before it is hidden. */
.s4n-footrow .s4n-fitem { white-space: nowrap; }
@media (max-width: 760px) {
  .s4n-footrow .s4n-sep--last { display: none; }
  .s4n-footrow a.s4n-fitem { display: block; margin-top: 2px; }
}

/* ---------- 8. Founder page ---------- */

/* one hairline between founder sections, centred in the section spacing */
.s4n-fsec { padding-top: 0 !important; padding-bottom: calc(var(--s4n-section) / 2) !important; }
.s4n-fsec--first { padding-top: clamp(128px, 16vh, 176px) !important; }
.s4n-fsec--last { padding-bottom: var(--s4n-section) !important; }
.s4n-fsec + .s4n-fsec > .e-con-inner::before {
  content: ""; display: block; width: 100%; height: 1px; flex: none;
  margin-bottom: calc(var(--s4n-section) / 2); background: var(--s4n-hairline);
}

.s4n-eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--s4n-muted); }
.s4n-eyebrow .elementor-heading-title::before { content: ""; width: 28px; height: 2px; border-radius: 1px; background: var(--s4n-indigo); }

.s4n-hero-grid { display: grid !important; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); column-gap: 24px; align-items: start; }
.s4n-hero-grid > .e-con, .s4n-hero-grid > .elementor-element { width: auto !important; }
.s4n-portrait { justify-self: end; width: 340px !important; max-width: 100%; filter: drop-shadow(0 0 0.8px rgba(20, 23, 31, 0.3)) drop-shadow(0 14px 22px rgba(20, 23, 31, 0.08)); }
.s4n-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.s4n-statement strong { color: var(--s4n-indigo); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .s4n-rise { animation: s4n-rise 0.9s var(--s4n-ease) both; }
  .s4n-rise--2 { animation-delay: 0.08s; }
  .s4n-rise--3 { animation-delay: 0.16s; }
  .s4n-rise--4 { animation-delay: 0.24s; }
  .s4n-rise--5 { animation-delay: 0.32s; }
}

.s4n-facts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s4n-facts > .e-con { width: auto !important; }
/* facts sit 40-56px under the hero grid (container gap 24px + this margin) */
.s4n-facts.e-con { margin-top: clamp(16px, 2.2vw, 32px) !important; }

.s4n-split-45 { display: grid !important; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); column-gap: 24px; align-items: start; }
.s4n-split-45 > .e-con, .s4n-split-45 > .elementor-element { width: auto !important; }
.s4n-offset { margin-top: calc(13px * 1.6 + 12px) !important; }   /* lines up with the heading under a label */

.s4n-rwash { background: radial-gradient(ellipse 55% 65% at 70% 62%, rgba(61, 79, 224, 0.08), rgba(61, 79, 224, 0) 70%) !important; }
.s4n-rglass {
  position: relative; padding: 6px clamp(20px, 3vw, 32px) !important;
  border: 1px solid rgba(20, 23, 31, 0.1); border-radius: 20px 28px 20px 20px; corner-top-right-shape: bevel;
  background: rgba(255, 255, 255, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 22px 44px -22px rgba(20, 23, 31, 0.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
@supports not (corner-shape: bevel) { .s4n-rglass { border-radius: 20px; } }
.s4n-rglass::after { top: -1px; right: -1px; }
.s4n-role-row { display: grid !important; grid-template-columns: 72px minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 24px; align-items: baseline; padding: 20px 0 !important; border-bottom: 1px solid var(--s4n-hairline); }
.s4n-role-row:last-child { border-bottom: 0; }
.s4n-role-row > .elementor-element { width: auto !important; }

.s4n-edu-card > .e-con { flex: 1 1 0 !important; min-width: 0; width: auto !important; }
/* each education card is a fact card (s4n-fcard > shell > core); the core holds the logo + text row */
.s4n-edu-card { flex-wrap: nowrap !important; flex-direction: row !important; align-items: center; gap: 20px; }
.s4n-edu-logo { flex: none; width: 64px !important; }
.s4n-edu-logo img { width: 64px; height: 64px; object-fit: contain; }

.s4n-principle-wrap { position: relative; }
.s4n-principle {
  padding: clamp(28px, 5vw, 56px) !important; border-radius: 20px; background: var(--s4n-graphite) !important;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}
.s4n-principle-line p { margin: 0; }
.s4n-principle-line strong { color: var(--s4n-indigo-dark); font-weight: 700; }

/* ---------- 9. Tablet (<= 960px) ---------- */

@media (max-width: 960px) {
  .s4n-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s4n-approach { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .s4n-approach > :first-child { grid-column: 1 / -1; }
  .s4n-glass { grid-template-columns: 1fr; }
}
/* below 860px three fact cards are too narrow for nayeem@space4next.com, so they stack as on phones */
@media (max-width: 860px) {
  .s4n-facts { grid-template-columns: 1fr; }
}

/* ---------- 10. Mobile (<= 760px) ---------- */

@media (max-width: 760px) {
  .s4n-grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .s4n-approach { grid-template-columns: 1fr; row-gap: 28px; }
  .s4n-step--2, .s4n-step--3 { margin-top: 0 !important; }
  .s4n-step--2::before, .s4n-step--3::before { display: none; }
  .s4n-split-40, .s4n-split-45, .s4n-hero-grid, .s4n-facts { grid-template-columns: 1fr; row-gap: 24px; }
  .s4n-offset { margin-top: 0 !important; }
  .s4n-portrait { order: -1; justify-self: start; width: 70vw !important; }
  .s4n-hero-grid .s4n-portrait.elementor-element { --container-widget-width: 70vw; width: 70vw !important; max-width: 70vw; }
  .s4n-role-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 4px; padding: 16px 0 !important; }
  .s4n-role-row > :nth-child(3) { grid-column: 2; }
  .s4n-rglass { padding: 4px 18px !important; }
  .s4n-edu-card { gap: 16px; }
  .s4n-edu-logo, .s4n-edu-logo img { width: 52px !important; height: 52px; }
  .s4n-dark::before { top: -4% !important; right: -30% !important; width: 120vw !important; filter: blur(20px); }
  .s4n-footrow { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
}

/* ---------- 11. 404 page (Theme Builder > Error 404 "Space4Next 404", id 72, V4 widgets) ---------- */

/* Astra wraps the 404 template in its own .ast-container; cancel it so the content lines up with the logo */
body.error404 .site-content > .ast-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
[data-elementor-type="error-404"] h1 { text-wrap: balance; }

/* narrow phones: the contact email and its round arrow were cut off by the glass panel (nayeem@ at <= 400px).
   Smaller type, padding and arrow; if it still does not fit, the arrow drops under the address instead of clipping. */
@media (max-width: 420px) {
  .s4n-glass { padding: 24px !important; }
  .s4n-mail .elementor-heading-title { font-size: clamp(16px, 4.6vw, 19px) !important; }
  .s4n-mail .elementor-heading-title a { gap: 10px; flex-wrap: wrap; row-gap: 12px; }
  .s4n-mail .elementor-heading-title a::after { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Glacial Indifference';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://space4next.com/wp-content/uploads/2026/10/GlacialIndifference-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Glacial Indifference';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://space4next.com/wp-content/uploads/2026/10/GlacialIndifference-Bold.woff2') format('woff2');
}
/* End Custom Fonts CSS */