/* ==========================================================================
   Southern Seauxe Consulting - design system
   Tokens, theme crossfade, hero scroll-camera, marquee, accordion.
   Layout and spacing live in Elementor container settings; this file owns the
   design tokens and the mechanisms Elementor widgets cannot express.
   ========================================================================== */

/* ---------- 1. tokens ---------------------------------------------------- */
body.ss-page,
body.ss-page[data-theme="dark"]{
  --bg:oklch(16% 0.03 258);
  --surface:oklch(21% 0.035 258);
  --text:oklch(96% 0.01 258);
  --muted:oklch(68% 0.02 258);
  --border:oklch(30% 0.03 258);
  --accent:oklch(65% 0.13 230);
  --accent-strong:oklch(58% 0.15 250);
}
body.ss-page[data-theme="light"]{
  --bg:oklch(98% 0.005 258);
  --surface:oklch(94% 0.01 258);
  --text:oklch(22% 0.03 258);
  --muted:oklch(48% 0.02 258);
  --border:oklch(88% 0.01 258);
  --accent:oklch(55% 0.15 230);
  --accent-strong:oklch(42% 0.14 255);
}
@supports not (color: oklch(50% 0.1 250)){
  body.ss-page,
  body.ss-page[data-theme="dark"]{--bg:#171b24;--surface:#20262f;--text:#f2f3f7;--muted:#9ba1ad;--border:#363d4b;--accent:#3f9fd3;--accent-strong:#3d7fd6}
  body.ss-page[data-theme="light"]{--bg:#f9fafb;--surface:#eceef2;--text:#22283a;--muted:#656b78;--border:#d9dce2;--accent:#1f82b8;--accent-strong:#2a4f9e}
}

body.ss-page{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Work Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
/* NB: no overflow-x on body. It makes body a scroll container, which breaks
   position:sticky for the header and the pinned hero stage. The hero clips
   itself via .ss-hero-stage{overflow:hidden}, so nothing escapes horizontally. */
body.ss-page,
body.ss-page .e-con,
body.ss-page .elementor-element,
body.ss-page a, body.ss-page p,
body.ss-page h1, body.ss-page h2, body.ss-page h3,
body.ss-page span, body.ss-page div, body.ss-page button, body.ss-page summary{
  transition:color 500ms cubic-bezier(0,0,.6,1),
             background-color 500ms cubic-bezier(0,0,.6,1),
             border-color 500ms cubic-bezier(0,0,.6,1);
}
body.ss-page a{color:inherit;text-decoration:none}
/* anchor nav clears the 72px sticky header */
body.ss-page [id]{scroll-margin-top:92px}
body.ss-page img{display:block;max-width:100%}

/* ---------- 2. typography ------------------------------------------------ */
body.ss-page h1, body.ss-page h2, body.ss-page h3{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;margin:0;
}
.ss-eyebrow .elementor-heading-title{
  font-family:'Work Sans',sans-serif;font-size:11px;font-weight:400;
  letter-spacing:3px;text-transform:uppercase;color:var(--accent);line-height:1.4;
}
.ss-eyebrow-strong .elementor-heading-title{color:var(--accent-strong)}
.ss-h1 .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:52px;line-height:1.1;letter-spacing:-.2px;color:var(--text)}
.ss-h2 .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:34px;line-height:1.2;color:var(--text)}
.ss-h2-lg .elementor-heading-title{font-size:36px}
.ss-h3 .elementor-heading-title{font-family:'Work Sans',sans-serif;font-weight:500;font-size:16px;line-height:1.4;color:var(--text)}
.ss-body p, .ss-body{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.ss-body-15 p{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 16px}
.ss-body-15 p:last-child{margin-bottom:0}
.ss-body-135 p{font-size:13.5px;line-height:1.7;color:var(--muted);margin:0}
.ss-body-13 p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.ss-quote .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:26px;line-height:1.5;color:var(--text)}
.ss-numeral .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:28px;line-height:1;color:var(--accent-strong)}
.ss-stat-value .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:48px;line-height:1;color:var(--accent)}
.ss-stat-label .elementor-heading-title{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-family:'Work Sans',sans-serif;font-weight:400}
.ss-card-title .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:20px;line-height:1.2;color:var(--text)}
.ss-micro .elementor-heading-title{font-size:12px;color:var(--muted);font-weight:400;font-family:'Work Sans',sans-serif}
.ss-name .elementor-heading-title{font-size:14px;font-weight:500;color:var(--text);font-family:'Work Sans',sans-serif}

/* ---------- 3. buttons --------------------------------------------------- */
body.ss-page .ss-btn .elementor-button{
  font-family:'Work Sans',sans-serif;font-size:13px;font-weight:500;line-height:1;
  height:44px;padding:0 26px;border-radius:32px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid transparent;box-shadow:none;
  transition:opacity 200ms ease,color 500ms cubic-bezier(0,0,.6,1),background-color 500ms cubic-bezier(0,0,.6,1),border-color 500ms cubic-bezier(0,0,.6,1);
}
body.ss-page .ss-btn-primary .elementor-button{background:var(--accent-strong);color:#fff}
body.ss-page .ss-btn-glass .elementor-button{
  background:oklch(90% 0 0 / .14);border:1px solid oklch(90% 0 0 / .32);
  color:var(--text);border-radius:40px;
}
@supports not (color: oklch(50% 0.1 250)){
  body.ss-page .ss-btn-glass .elementor-button{background:rgba(226,226,226,.14);border-color:rgba(226,226,226,.32)}
}
body.ss-page .ss-btn .elementor-button:hover{opacity:.85}
body.ss-page .ss-btn-header .elementor-button{height:40px;padding:0 20px;font-size:12px}

/* ---------- 4. header ---------------------------------------------------- */
body.ss-page .ss-header{
  position:sticky;top:0;z-index:50;height:72px;margin-bottom:-72px;
  background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
body.ss-page .ss-header-logo img{width:30px;height:30px;border-radius:50%;object-fit:cover}
body.ss-page .ss-wordmark .elementor-heading-title{font-family:'Space Grotesk',sans-serif;font-weight:400;font-size:15px;letter-spacing:.2px;color:var(--text)}
body.ss-page .ss-nav .elementor-nav-menu a.elementor-item{
  font-family:'Work Sans',sans-serif;font-size:13px;font-weight:400;color:var(--muted);
  padding:0!important;transition:opacity 200ms ease,color 500ms cubic-bezier(0,0,.6,1);
}
body.ss-page .ss-nav .elementor-nav-menu a.elementor-item:hover{opacity:.8;color:var(--muted)}
body.ss-page .ss-nav .elementor-nav-menu a.elementor-item:before,
body.ss-page .ss-nav .elementor-nav-menu a.elementor-item:after{display:none!important}

/* ---------- 5. hero: track / stage / scene ------------------------------- */
body.ss-page .ss-hero-track{position:relative;height:250vh;padding:0!important;overflow:visible}
body.ss-page .ss-hero-stage{
  position:sticky;top:0;height:100vh;width:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:0!important;
  max-width:none!important;
}
body.ss-page .ss-hero-layers{position:static!important;width:0!important;height:0;flex:0 0 auto;margin:0!important;padding:0!important}
body.ss-page .ss-hero-layers .elementor-widget-container{position:static}

.ss-hero-scene{
  position:absolute;top:0;left:0;width:8192px;height:4608px;
  transform-origin:0 0;transform:translate3d(0,0,0) scale(.2);
  z-index:1;
}
/* No permanent backface-visibility/will-change here: either one promotes the
   8192x4608 scene to a composited layer for the life of the page (~150MB of
   GPU memory), which starves the compositor and blanks the document once you
   scroll away. will-change is applied only while the camera is actually
   moving, and the scene is parked when the hero leaves the viewport. */
.ss-hero-scene.is-moving{will-change:transform}
.ss-hero-stage[data-parked] .ss-hero-scene{visibility:hidden}
.ss-hero-plate{position:absolute;left:0;top:0;width:8192px;height:4608px;max-width:none}
.ss-hero-inpaint{position:absolute;left:3460px;top:1950px;width:1400px;height:1000px;max-width:none}
.ss-hero-laptop{position:absolute;left:3880px;top:2294px;width:557.6px;height:381.7px;max-width:none}
.ss-hero-screen{
  position:absolute;left:3990px;top:2363px;width:342px;height:211px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 110%, oklch(30% 0.08 258) 0%, oklch(16% 0.03 258) 60%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:oklch(96% 0.01 258);text-align:center;
}
@supports not (color: oklch(50% 0.1 250)){
  .ss-hero-screen{background:radial-gradient(120% 90% at 50% 110%, #2b3348 0%, #171b24 60%);color:#f2f3f7}
}
.ss-hero-screen img{width:37px;height:37px;border-radius:8px;max-width:none}
.ss-hero-screen-brand{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:12.5px;letter-spacing:2.5px}
.ss-hero-screen-rule{width:22px;height:1px;background:var(--accent)}
.ss-hero-screen-line{font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:18.5px;line-height:1.15;letter-spacing:-.2px;max-width:270px}
.ss-hero-screen-sub{font-size:6.3px;letter-spacing:1.7px;color:oklch(68% 0.02 258)}
@supports not (color: oklch(50% 0.1 250)){ .ss-hero-screen-sub{color:#9ba1ad} }

.ss-hero-edgeblur{position:absolute;inset:0;z-index:2;pointer-events:none}
.ss-hero-edgeblur[data-off]{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask-image:none!important;mask-image:none!important}
.ss-hero-scrim{
  position:absolute;inset:0 0 50% 0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg, oklch(10% 0.02 258 / .62), oklch(10% 0.02 258 / .3) 40%, transparent);
}
@supports not (color: oklch(50% 0.1 250)){
  .ss-hero-scrim{background:linear-gradient(180deg, rgba(12,15,20,.62), rgba(12,15,20,.3) 40%, transparent)}
}
body.ss-page .ss-hero-copy{
  position:relative;z-index:4;text-align:center;max-width:720px;width:100%;
  padding:0 24px!important;
}
body.ss-page .ss-hero-hint{
  position:absolute;left:0;right:0;bottom:26px;z-index:5;text-align:center;
  font-size:11px;letter-spacing:3px;color:var(--muted);pointer-events:none;
  width:auto!important;padding:0!important;margin:0!important;
}
body.ss-page .ss-hero-btns{flex-direction:row!important;justify-content:center;gap:14px;width:auto!important;padding:0!important}

/* ---------- 6. marquee --------------------------------------------------- */
.elementor-element-ssx0024,.elementor-element-ssx0024>.elementor-widget-container{width:100%!important;max-width:none!important}
.ss-marquee-mask{overflow:hidden;width:100%;display:block}
.ss-marquee{display:flex;flex-wrap:nowrap;width:max-content;min-width:100%;animation:ss-marquee 24s linear infinite;will-change:transform}
.ss-marquee-group{display:flex;flex:0 0 auto;gap:90px;padding-right:90px;white-space:nowrap}
.ss-marquee span{font-family:'Space Grotesk',sans-serif;font-size:20px;color:var(--text);opacity:.7;white-space:nowrap}
@keyframes ss-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
.ss-tep{font-size:11px;letter-spacing:1px;color:var(--muted);margin-left:2px;vertical-align:1px}
.ss-cred-single{max-width:1000px}
.ss-cred-single .ss-card{flex-direction:row;align-items:center;gap:40px;padding:34px 40px!important;width:100%}
.ss-cred-single .ss-card-title{font-size:28px;color:var(--accent);margin:0!important;flex:none}
.ss-cred-single .ss-body-13 p{font-size:14px;line-height:1.7}
.ss-disclaimer p{font-size:12px;line-height:1.7;color:var(--muted);max-width:820px;margin:0}

/* ---------- 7. services accordion (Elementor nested-accordion) ----------- */
body.ss-page .ss-accordion .e-n-accordion-item{border-bottom:1px solid var(--border);background:transparent;border-radius:0}
body.ss-page .ss-accordion .e-n-accordion-item-title{
  padding:20px 0;background:transparent;border:0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
body.ss-page .ss-accordion .e-n-accordion-item-title-header,
body.ss-page .ss-accordion .e-n-accordion-item-title-text{
  font-family:'Work Sans',sans-serif;font-size:16px;font-weight:500;color:var(--text);text-align:left;margin:0;
}
body.ss-page .ss-accordion .e-n-accordion-item-title-icon{color:var(--accent);font-size:18px;line-height:1}
body.ss-page .ss-accordion .e-n-accordion-item-title-icon span{font-size:18px;line-height:1;color:var(--accent);font-family:'Work Sans',sans-serif}
body.ss-page .ss-accordion .e-n-accordion-item-title-icon svg{width:13px;height:13px;fill:var(--accent)}
/* strip Elementor's default panel chrome: the design has a bare panel */
body.ss-page .ss-accordion .e-n-accordion-item > .e-con{padding:0 0 20px 0!important}
body.ss-page .ss-accordion .e-n-accordion-item > .e-con,
body.ss-page .ss-accordion .e-n-accordion-item > .e-con > .e-con-inner{
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
/* the +/- marks read as accent, whether Elementor renders them as an icon font or SVG */
body.ss-page .ss-accordion .e-n-accordion-item-title-icon,
body.ss-page .ss-accordion .e-n-accordion-item-title-icon > span,
body.ss-page .ss-accordion .e-n-accordion-item-title-icon i,
body.ss-page .ss-accordion .e-n-accordion-item-title-icon svg{
  color:var(--accent)!important;fill:var(--accent)!important;font-size:15px;line-height:1;
}
body.ss-page .ss-accordion .e-n-accordion-item-title-icon svg{width:14px;height:14px}
body.ss-page .ss-accordion .ss-acc-body p{font-size:14px;line-height:1.7;color:var(--muted);max-width:460px;margin:0}
body.ss-page .ss-accordion .e-n-accordion-item-title:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---------- 8. surfaces / cards ----------------------------------------- */
.ss-visual{
  aspect-ratio:4/3;background:var(--surface);border:1px solid var(--border);border-radius:6px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.5px;
  color:var(--muted);line-height:1.7;
}
body.ss-page .ss-visual-sticky{position:sticky;top:110px}
body.ss-page .ss-card{background:var(--surface);border:1px solid var(--border);border-radius:6px}
body.ss-page .ss-stat-cell{border-right:1px solid var(--border)}
body.ss-page .ss-stat-cell:last-child{border-right:0}
.ss-avatar{width:44px;height:44px;border-radius:50%;background:var(--surface);border:1px solid var(--border);flex:0 0 auto;overflow:hidden}
.ss-avatar img{width:100%;height:100%;object-fit:cover;display:block}
body.ss-page .ss-footer{background:var(--surface);border-top:1px solid var(--border)}
body.ss-page .ss-footer-links{flex-direction:row!important;gap:24px;width:auto!important;padding:0!important}
body.ss-page .ss-footer-links .elementor-heading-title{font-size:12px;color:var(--muted)}

/* ---------- 8b. layout helpers ------------------------------------------ */
/* containers that must size to their content instead of filling the row */
body.ss-page .ss-auto{width:auto!important;flex:0 0 auto}
/* equal-width columns, boxed (.e-con-inner) or full */
body.ss-page .ss-cols-2 > .e-con-inner > .e-con,
body.ss-page .ss-cols-2 > .e-con,
body.ss-page .ss-cols-3 > .e-con-inner > .e-con,
body.ss-page .ss-cols-3 > .e-con{flex:1 1 0;min-width:0;width:auto}
body.ss-page .ss-rule-y{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ss-marquee-label .elementor-heading-title{
  font-family:'Work Sans',sans-serif;font-size:10px;font-weight:400;letter-spacing:3px;
  text-transform:uppercase;color:var(--muted);line-height:1.4;
}

/* ---------- 9. responsive ------------------------------------------------ */
@media (max-width:1024px){
  .ss-h1 .elementor-heading-title{font-size:40px}
  .ss-h2 .elementor-heading-title{font-size:28px}
  .ss-h2-lg .elementor-heading-title{font-size:30px}
  body.ss-page .ss-visual-sticky{position:static}
  /* two- and three-column grids collapse to one column */
  body.ss-page .ss-cols-2 > .e-con-inner,
  body.ss-page .ss-cols-3 > .e-con-inner,
  body.ss-page .ss-cols-3.e-con-full,
  body.ss-page .e-con.ss-cols-3 > .e-con-inner{flex-direction:column!important}
  body.ss-page .ss-cols-2 > .e-con-inner > .e-con,
  body.ss-page .ss-cols-3 > .e-con-inner > .e-con,
  body.ss-page .ss-cols-3 > .e-con{width:100%!important;flex:0 0 auto}
  body.ss-page .ss-header,
  body.ss-page .ss-footer,
  body.ss-page .e-con.ss-cols-2,
  body.ss-page .e-con.ss-cols-3{padding-left:24px!important;padding-right:24px!important}
  body.ss-page .ss-stat-cell{border-right:0}
}
@media (max-width:767px){
  /* Elementor's own .elementor-widget-nav-menu:not(:has(...)) rule outranks a
     plain class selector, so this needs !important to collapse the nav. */
  body.ss-page .ss-nav{display:none!important}
  body.ss-page .ss-header{padding-left:24px!important;padding-right:24px!important}
  body.ss-page .ss-header .ss-auto{flex-wrap:nowrap}
  .ss-marquee{gap:56px}
  .ss-marquee span{font-size:17px}
  body.ss-page .ss-hero-btns{flex-wrap:wrap}
  /* portrait puts the copy over the bright water rather than the sky, so the
     half-height scrim from the desktop design no longer carries the text */
  .ss-hero-scrim{inset:0;background:linear-gradient(180deg, rgba(12,15,20,.74) 0%, rgba(12,15,20,.5) 45%, rgba(12,15,20,.38) 100%)}
  body.ss-page .ss-stat-cell{border-right:0;border-bottom:1px solid var(--border)}
  body.ss-page .ss-stat-cell:last-child{border-bottom:0}
}

/* ---------- 9b. token colours beat Elementor's global-colour output -------
   Elementor prints .elementor-widget-heading .elementor-heading-title{color:
   var(--e-global-color-primary)} into the per-page stylesheet, which loads
   after this file at equal specificity. These rules re-assert the design
   tokens with a higher-specificity selector so the theme crossfade owns
   colour everywhere. Sizes and fonts above are uncontested.
   ---------------------------------------------------------------------- */
body.ss-page .ss-eyebrow .elementor-heading-title{color:var(--accent)}
body.ss-page .ss-eyebrow-strong .elementor-heading-title{color:var(--accent-strong)}
body.ss-page .ss-h1 .elementor-heading-title,
body.ss-page .ss-h2 .elementor-heading-title,
body.ss-page .ss-h3 .elementor-heading-title,
body.ss-page .ss-quote .elementor-heading-title,
body.ss-page .ss-card-title .elementor-heading-title,
body.ss-page .ss-name .elementor-heading-title,
body.ss-page .ss-wordmark .elementor-heading-title{color:var(--text)}
body.ss-page .ss-numeral .elementor-heading-title{color:var(--accent-strong)}
body.ss-page .ss-stat-value .elementor-heading-title{color:var(--accent)}
body.ss-page .ss-stat-label .elementor-heading-title,
body.ss-page .ss-micro .elementor-heading-title,
body.ss-page .ss-marquee-label .elementor-heading-title{color:var(--muted)}
body.ss-page .ss-body,
body.ss-page .ss-body p,
body.ss-page .ss-body-15,
body.ss-page .ss-body-15 p,
body.ss-page .ss-body-135,
body.ss-page .ss-body-135 p,
body.ss-page .ss-body-13,
body.ss-page .ss-body-13 p,
body.ss-page .ss-accordion .ss-acc-body,
body.ss-page .ss-accordion .ss-acc-body p{color:var(--muted)}
body.ss-page .ss-btn-primary .elementor-button{color:#fff}
body.ss-page .ss-btn-glass .elementor-button{color:var(--text)}
body.ss-page .ss-accordion .e-n-accordion-item-title-text{color:var(--text)}

/* ---------- 9c. hero legibility over the photograph ---------------------
   The copy sits over bright chalk cliffs and sunlit water, so the muted body
   token disappears. A feathered dark pool behind the copy, a brighter and
   larger lede, and soft text shadows keep it readable without a hard panel.
   ---------------------------------------------------------------------- */
body.ss-page .ss-hero-copy::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;width:150%;height:240%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(8,11,17,.66) 0%, rgba(8,11,17,.52) 45%, rgba(8,11,17,.2) 75%, rgba(8,11,17,0) 100%);
}
/* the eyebrow lands on the brightest chalk, so it needs more than the pool */
body.ss-page .ss-hero-copy .ss-eyebrow .elementor-heading-title{
  color:#9fd8f5;font-size:12px;font-weight:500;
  text-shadow:0 0 2px rgba(0,0,0,.7),0 1px 12px rgba(0,0,0,.75);
}
body.ss-page .ss-hero-copy .ss-h1 .elementor-heading-title{
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
body.ss-page .ss-hero-copy .ss-body,
body.ss-page .ss-hero-copy .ss-body p{
  font-size:19px;line-height:1.6;font-weight:400;color:#e8ebf1;
  text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 18px rgba(0,0,0,.55);
  max-width:640px;margin-left:auto;margin-right:auto;
}
@media (max-width:767px){
  body.ss-page .ss-hero-copy .ss-body,
  body.ss-page .ss-hero-copy .ss-body p{font-size:17px}
}

/* ---------- 10. reduced motion ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .ss-marquee{animation:none}
  body.ss-page .ss-hero-track{height:100vh}
  body.ss-page .ss-hero-stage{position:relative}
  .ss-hero-edgeblur{display:none}
}

/* ---------- 11. contact: grid, form, portrait, info row ------------------
   Adapts the reference contact layout (form left, portrait right, icon row
   below) to the dark token set. Elementor's form widget owns the markup, so
   the field chrome is restyled here rather than through widget controls.
   ---------------------------------------------------------------------- */
body.ss-page .ss-contact-cols > .e-con-inner > .e-con:first-child,
body.ss-page .ss-contact-cols > .e-con:first-child{flex:1 1 57%;min-width:0}
body.ss-page .ss-contact-cols > .e-con-inner > .e-con:last-child,
body.ss-page .ss-contact-cols > .e-con:last-child{flex:1 1 43%;min-width:0}

/* --- form --- */
body.ss-page .ss-form .elementor-field-group{margin-bottom:0}
body.ss-page .ss-form .elementor-field-label{
  font-family:'Work Sans',sans-serif;font-size:12px;font-weight:500;letter-spacing:.3px;
  color:var(--muted);margin-bottom:8px;padding:0;line-height:1.3;
}
body.ss-page .ss-form .elementor-field-textual{
  width:100%;height:50px;padding:0 16px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font-family:'Work Sans',sans-serif;font-size:14.5px;font-weight:400;line-height:1.4;
  box-shadow:none;-webkit-appearance:none;appearance:none;
  transition:border-color 200ms ease,background-color 200ms ease;
}
body.ss-page .ss-form textarea.elementor-field-textual{height:auto;min-height:132px;padding:14px 16px;resize:vertical}
body.ss-page .ss-form .elementor-field-textual::placeholder{color:var(--muted);opacity:.55}
body.ss-page .ss-form .elementor-field-textual:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px oklch(65% 0.13 230 / .16);
}
@supports not (color: oklch(50% 0.1 250)){
  body.ss-page .ss-form .elementor-field-textual:focus{box-shadow:0 0 0 3px rgba(63,159,211,.16)}
}
/* Elementor renders its own caret inside .elementor-select-wrapper, so the
   select keeps appearance:none but borrows that caret instead of a second one. */
body.ss-page .ss-form .elementor-select-wrapper{position:relative;padding:0;border:0;background:transparent}
body.ss-page .ss-form select.elementor-field-textual{padding-right:44px;cursor:pointer;background-image:none}
body.ss-page .ss-form .select-caret-down-wrapper{position:absolute;top:50%;right:16px;transform:translateY(-50%);pointer-events:none;line-height:0;inset-inline-end:16px}
body.ss-page .ss-form .select-caret-down-wrapper svg{width:10px;height:10px;fill:var(--muted)}

/* consent checkbox */
body.ss-page .ss-form .elementor-field-type-acceptance .elementor-field-subgroup{margin:0}
body.ss-page .ss-form .elementor-field-option{display:flex;align-items:flex-start;gap:11px}
body.ss-page .ss-form input[type=checkbox].elementor-acceptance-field{
  -webkit-appearance:none;appearance:none;flex:0 0 auto;margin:1px 0 0;
  width:17px;height:17px;border-radius:4px;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);
  transition:background-color 180ms ease,border-color 180ms ease;
}
body.ss-page .ss-form input[type=checkbox].elementor-acceptance-field:checked{
  background:var(--accent-strong);border-color:var(--accent-strong);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='9' viewBox='0 0 11 9'%3E%3Cpath d='M1 4.6 4 7.6 10 1.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
body.ss-page .ss-form input[type=checkbox].elementor-acceptance-field:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.ss-page .ss-form .elementor-field-option label{
  font-family:'Work Sans',sans-serif;font-size:12.5px;line-height:1.55;color:var(--muted);cursor:pointer;margin:0;
}
body.ss-page .ss-form .elementor-field-type-acceptance .elementor-field-label{display:none}
body.ss-page .ss-form select.elementor-field-textual option{background:#20262f;color:#f2f3f7}
body.ss-page .ss-form .elementor-field-type-submit{padding-top:6px}
body.ss-page .ss-form .elementor-field-type-submit button.elementor-button{
  background:var(--accent-strong);color:#fff;border:0;border-radius:32px;
  height:48px;padding:0 30px;min-width:0;
  font-family:'Work Sans',sans-serif;font-size:13px;font-weight:500;line-height:1;letter-spacing:.2px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:opacity 200ms ease;
}
body.ss-page .ss-form .elementor-field-type-submit button.elementor-button:hover{opacity:.87}
body.ss-page .ss-form .elementor-button-icon svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.8}
body.ss-page .ss-form .elementor-message{font-family:'Work Sans',sans-serif;font-size:13.5px;line-height:1.6;margin-top:14px}
body.ss-page .ss-form .elementor-message.elementor-message-success{color:var(--accent)}
body.ss-page .ss-form .elementor-message.elementor-message-danger{color:#ef9a9a}
body.ss-page .ss-form .elementor-field-required .elementor-field-label:after{content:" *";color:var(--accent)}
body.ss-page .ss-form-note{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0}

/* --- portrait card --- */
.ss-portrait{position:relative;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}
.ss-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.ss-portrait:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:48%;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,12,18,0) 0%,rgba(9,12,18,.55) 55%,rgba(9,12,18,.9) 100%);
}
.ss-portrait-cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}
.ss-portrait-cap b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:17px;letter-spacing:.2px;color:#f2f3f7}
.ss-portrait-cap span{display:block;margin-top:6px;font-family:'Work Sans',sans-serif;font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;color:#9fd8f5}

/* --- info row --- */
.ss-info{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ss-info-item{display:flex;gap:14px;align-items:flex-start}
.ss-info-ic{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:var(--surface);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.ss-info-ic svg{width:16px;height:16px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ss-info-t{margin:0 0 6px;font-family:'Work Sans',sans-serif;font-size:10.5px;font-weight:400;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted);line-height:1.4}
.ss-info-v{margin:0;font-family:'Work Sans',sans-serif;font-size:14px;line-height:1.55;color:var(--text)}
.ss-info-v a{color:var(--text)}
.ss-info-v a:hover{color:var(--accent)}
.ss-info-v small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}

@media (max-width:1024px){
  body.ss-page .ss-contact-cols > .e-con-inner,
  body.ss-page .e-con.ss-contact-cols > .e-con-inner,
  body.ss-page .ss-contact-cols.e-con-full{flex-direction:column!important}
  body.ss-page .ss-contact-cols > .e-con-inner > .e-con,
  body.ss-page .ss-contact-cols > .e-con{width:100%!important;flex:0 0 auto}
  /* the 24px gutter belongs to the section, not to the inner row - adding it
     here as well double-padded the columns on phones. */
  body.ss-page .e-con#contact{padding-left:24px!important;padding-right:24px!important}
  .ss-portrait{max-width:420px;margin:0 auto}
  .ss-info{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:767px){
  .ss-info{grid-template-columns:1fr;gap:20px}
  body.ss-page .ss-form .elementor-field-type-submit button.elementor-button{width:100%}
}
/* ---------- 11b. field chrome beats Elementor's per-page form output -----
   Elementor prints a white field background into post-15.css at (0,6,0):
   .elementor-15 .elementor-element.elementor-element-ssx0112 .elementor-field-group
   .elementor-field:not(.elementor-select-wrapper). That file loads after this one,
   so the token has to be re-asserted above it. Same approach as section 9b.
   ---------------------------------------------------------------------- */
body.ss-page .elementor-widget-form.ss-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual,
body.ss-page .elementor-widget-form.ss-form .elementor-form .elementor-field-group .elementor-select-wrapper select.elementor-field-textual{
  background-color:var(--surface);background-image:none;color:var(--text);
  border:1px solid var(--border);border-radius:8px;
}
body.ss-page .elementor-widget-form.ss-form .elementor-form .elementor-field-group .elementor-select-wrapper{
  background-color:transparent;border:0;
}
body.ss-page .elementor-widget-form.ss-form .elementor-form .elementor-field-group .elementor-field.elementor-field-textual:focus,
body.ss-page .elementor-widget-form.ss-form .elementor-form .elementor-field-group .elementor-select-wrapper select.elementor-field-textual:focus{
  border-color:var(--accent);
}
body.ss-page .elementor-widget-form.ss-form .elementor-form .elementor-field-group input[type=checkbox].elementor-acceptance-field{
  background-color:var(--surface);border:1px solid var(--border);
}
body.ss-page .elementor-widget-form.ss-form .elementor-form .elementor-field-group input[type=checkbox].elementor-acceptance-field:checked{
  background-color:var(--accent-strong);border-color:var(--accent-strong);
}
/* ---------- 12. services visual: photo panel ----------------------------
   The sticky panel beside the services accordion. Slides are stacked and
   crossfaded by the accordion runtime (seaux.js section 3) using the index of
   the open item. Inert until the panel carries .ss-visual-photo, so the
   monospace placeholder in section 8 still renders correctly on its own.
   ---------------------------------------------------------------------- */
body.ss-page .ss-visual.ss-visual-photo{
  display:block;padding:0;position:relative;overflow:hidden;
  aspect-ratio:4/3;border-radius:6px;border:1px solid var(--border);background:var(--surface);
}
body.ss-page .ss-visual-photo img[data-ss-slide]{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;opacity:0;transform:scale(1.035);
  transition:opacity 600ms cubic-bezier(0,0,.6,1),transform 1100ms cubic-bezier(0,0,.6,1);
}
body.ss-page .ss-visual-photo img[data-ss-slide].is-on{opacity:1;transform:scale(1)}
body.ss-page .ss-visual-photo:after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,12,18,.12) 0%,rgba(9,12,18,.28) 52%,rgba(9,12,18,.78) 100%);
}
body.ss-page .ss-visual-photo .ss-visual-cap{
  position:absolute;left:22px;right:22px;bottom:18px;z-index:2;
  font-family:'Work Sans',sans-serif;font-size:10.5px;font-weight:400;
  letter-spacing:2.2px;text-transform:uppercase;color:#9fd8f5;line-height:1.4;
}
@media (prefers-reduced-motion:reduce){
  body.ss-page .ss-visual-photo img[data-ss-slide]{transition:opacity 1ms linear;transform:none}
  body.ss-page .ss-visual-photo img[data-ss-slide].is-on{transform:none}
}

/* ---------- 13. who we serve: video panel -------------------------------
   16:9 rather than the 4:3 used elsewhere, so the footage is not cropped.
   Silent, looping and ambient; playback is driven by seaux.js section 4,
   which starts it on intersection and never downloads it for visitors who
   do not scroll this far. The toggle satisfies WCAG 2.2.2 - a loop longer
   than five seconds needs a way to stop it.
   ---------------------------------------------------------------------- */
body.ss-page .ss-visual.ss-visual-video{
  display:block;padding:0;position:relative;overflow:hidden;
  aspect-ratio:16/9;border-radius:6px;border:1px solid var(--border);background:var(--surface);
}
body.ss-page .ss-visual-video video{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
body.ss-page .ss-video-toggle{
  position:absolute;right:14px;bottom:14px;z-index:2;
  width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(12,15,20,.45);border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:.62;transition:opacity 200ms ease;
}
body.ss-page .ss-visual-video:hover .ss-video-toggle{opacity:1}
body.ss-page .ss-video-toggle:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:3px}
body.ss-page .ss-video-toggle svg{width:11px;height:11px;fill:#fff;display:block}
body.ss-page .ss-video-toggle .ss-ico-play{display:none}
body.ss-page .ss-video-toggle[data-state='paused'] .ss-ico-play{display:block}
body.ss-page .ss-video-toggle[data-state='paused'] .ss-ico-pause{display:none}

/* ---------- 12. how-we-operate expanding panels ---------------------- */
.ss-ind-widget,.ss-ind-widget>.elementor-widget-container{width:100%!important;max-width:none!important}
.ss-ind{--h:520px;--gap:20px;--grow-open:635;--grow-closed:128;--ease:cubic-bezier(.23,1,.32,1);--dur:620ms;width:100%}
.ss-ind__track{display:flex;gap:var(--gap);height:var(--h)}
.ss-ind__panel{position:relative;isolation:isolate;overflow:hidden;min-width:0;border-radius:6px;border:1px solid var(--border);background:var(--surface);flex:var(--grow-closed) 1 0%;transition:flex-grow var(--dur) var(--ease);cursor:pointer;outline:none}
.ss-ind__panel:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.ss-ind__panel.is-active{flex-grow:var(--grow-open);cursor:default}
.ss-ind__media{position:absolute;inset:0;z-index:0;background:var(--bg-img,repeating-linear-gradient(135deg,oklch(80% .01 258) 0 12px,oklch(86% .01 258) 12px 24px));background-size:cover;background-position:center;filter:grayscale(1) contrast(1.05);opacity:.7;transform:scale(1.04);transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.ss-ind__panel.is-active .ss-ind__media{filter:grayscale(0);opacity:1;transform:scale(1)}
.ss-ind__veil{position:absolute;inset:0;z-index:1;opacity:0;background:linear-gradient(to top,oklch(42% .14 255) 0%,oklch(42% .14 255 / .85) 22%,oklch(42% .14 255 / .3) 42%,transparent 60%);transition:opacity var(--dur) var(--ease)}
.ss-ind__panel.is-active .ss-ind__veil{opacity:1}
.ss-ind__num{position:absolute;z-index:3;left:0;right:0;bottom:28px;text-align:center;font-family:'Space Grotesk',sans-serif;font-size:22px;line-height:1;color:var(--accent-strong);transition:opacity 260ms var(--ease)}
.ss-ind__panel.is-active .ss-ind__num{opacity:0}
.ss-ind__body{position:absolute;z-index:3;left:0;bottom:0;width:520px;max-width:100%;padding:32px;color:#fff;opacity:0;transform:translateY(14px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);pointer-events:none}
.ss-ind__panel.is-active .ss-ind__body{opacity:1;transform:none;transition-delay:140ms}
.ss-ind__kicker{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:3px;opacity:.8;margin-bottom:10px}
.ss-ind__body h3{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:500;letter-spacing:-.01em;margin:0 0 10px;color:#fff}
.ss-ind__body p{margin:0;font-family:'Work Sans',sans-serif;font-size:15px;line-height:1.55;opacity:.92;max-width:42ch;color:#fff}
@media (max-width:1024px){.ss-ind__track{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch}.ss-ind__track::-webkit-scrollbar{display:none}.ss-ind__panel{flex:0 0 84%;height:440px;scroll-snap-align:start;cursor:default}.ss-ind__panel .ss-ind__media{filter:grayscale(0);opacity:1;transform:none}.ss-ind__panel .ss-ind__veil{opacity:1}.ss-ind__panel .ss-ind__num{opacity:0}.ss-ind__panel .ss-ind__body{opacity:1;transform:none;width:100%}}
@media (prefers-reduced-motion:reduce){.ss-ind *{transition-duration:1ms!important}}

.ss-ind__video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.ss-ind__panel.is-active .ss-ind__video{opacity:1}
@media (max-width:1024px){.ss-ind__panel .ss-ind__video{opacity:1}}

.ss-credit{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ss-credit:hover{color:var(--text)}

.ss-micro-credit{font-family:'Work Sans',sans-serif;font-size:12px;color:var(--muted);white-space:nowrap}

body.ss-page .ss-footer-left{flex-direction:row!important;align-items:center;gap:10px;width:auto!important;flex-wrap:wrap}
.ss-micro-credit::before{content:'\00b7';margin-right:10px;color:var(--muted)}

/* ---------- 13. dot cursor (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
  body.ss-page.ss-cursor, body.ss-page.ss-cursor a, body.ss-page.ss-cursor button, body.ss-page.ss-cursor [role=button], body.ss-page.ss-cursor summary, body.ss-page.ss-cursor input, body.ss-page.ss-cursor textarea, body.ss-page.ss-cursor label{cursor:none!important}
  .ss-dot{position:fixed;left:0;top:0;z-index:99999;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--accent);pointer-events:none;opacity:0;transform:translate3d(-100px,-100px,0) scale(1);transition:opacity 200ms,width 220ms cubic-bezier(.2,.8,.2,1),height 220ms cubic-bezier(.2,.8,.2,1),margin 220ms cubic-bezier(.2,.8,.2,1),background-color 220ms;mix-blend-mode:normal;will-change:transform}
  .ss-dot.is-on{opacity:1}
  .ss-dot.is-link{width:34px;height:34px;margin:-17px 0 0 -17px;background:oklch(65% .13 230 / .25);box-shadow:inset 0 0 0 1.5px var(--accent)}
  .ss-dot.is-text{width:2px;height:22px;margin:-11px 0 0 -1px;border-radius:1px}
}

/* ---------- 14. fluid hover on primary buttons ---------- */
.ss-btn-primary .elementor-button.ss-fluid-btn{position:relative;isolation:isolate;overflow:hidden}
.ss-btn-primary .elementor-button .elementor-button-content-wrapper{position:relative;z-index:1;pointer-events:none}
.ss-fluid{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden;mix-blend-mode:screen;opacity:0;transition:opacity .5s ease-out}
.ss-fluid-btn.is-fluid .ss-fluid{opacity:.6;transition-duration:0ms}
.ss-fluid canvas{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);display:block}
.ss-btn-primary .elementor-button.ss-fluid-btn:hover{opacity:1;background:oklch(52% .15 250)}
@media (prefers-reduced-motion:reduce),(hover:none),(max-width:639px){.ss-fluid{display:none}}

/* ---------- 15. responsive pass: all devices & orientations ---------------- */
/* dynamic-toolbar-safe hero height on mobile browsers */
body.ss-page .ss-hero-stage{height:100vh;height:100svh}
body.ss-page .ss-hero-track{height:250vh;height:250svh}
/* nav: inline menu from tablet up, burger only on phones */
@media (min-width:768px){
  body.ss-page .ss-nav .elementor-menu-toggle{display:none!important}
  body.ss-page .ss-nav .elementor-nav-menu--main{display:flex!important}
  body.ss-page .ss-nav .elementor-nav-menu--dropdown{display:none!important}
}
@media (max-width:767px){
  body.ss-page .ss-nav{display:block!important;margin-left:auto}
  body.ss-page .ss-nav .elementor-nav-menu--main{display:none!important}
  body.ss-page .ss-nav .elementor-menu-toggle{display:flex;width:40px;height:40px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--border);border-radius:50%;color:var(--text)}
  body.ss-page .ss-nav .elementor-menu-toggle svg{width:18px;height:18px;fill:currentColor}
  body.ss-page .ss-nav .elementor-nav-menu--dropdown{position:fixed;left:0;right:0;top:72px;margin:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:none;padding:8px 0}
  body.ss-page .ss-nav .elementor-nav-menu--dropdown a.elementor-item{display:block;padding:16px 24px;font-size:15px;color:var(--text);background:transparent}
  body.ss-page .ss-header .ss-auto{gap:12px}
}
/* services: on phones the visual must flow under the accordion, never overlap */
@media (max-width:767px){
  body.ss-page .elementor-element-ssx0022 > .e-con-inner{flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important}
  body.ss-page .elementor-element-ssx001f{width:100%!important;flex:0 0 auto!important}
  body.ss-page .elementor-element-ssx0021{position:static!important;top:auto!important;width:100%!important;height:auto!important;flex:0 0 auto!important;margin-top:8px}
  body.ss-page .elementor-element-ssx0021 .ss-visual{width:100%;height:auto;aspect-ratio:4/3}
  body.ss-page .elementor-element-ssx0021 .ss-visual.ss-visual-photo{aspect-ratio:4/3}
}
/* stats: keep the three cells in a row down to small tablets, stack only on phones */
@media (max-width:1024px) and (min-width:600px){
  body.ss-page .elementor-element-ssx004d > .e-con-inner{flex-direction:row!important}
  body.ss-page .elementor-element-ssx004d > .e-con-inner > .e-con{width:33.333%!important;flex:1 1 0!important}
  body.ss-page .elementor-element-ssx004d .ss-stat-cell{border-right:1px solid var(--border);border-bottom:0}
  body.ss-page .elementor-element-ssx004d .ss-stat-cell:last-child{border-right:0}
}
@media (max-width:599px){
  body.ss-page .ss-stat-cell{padding:26px 20px!important;border-right:0!important;border-bottom:1px solid var(--border)}
  body.ss-page .ss-stat-cell:last-child{border-bottom:0}
  .ss-stat-value .elementor-heading-title{font-size:42px}
}
/* how-we-operate cards on phones: full-width swipe cards, shorter */
@media (max-width:767px){
  .ss-ind__panel{flex:0 0 88%;height:400px}
  .ss-ind__body{padding:24px}
  .ss-ind__body h3{font-size:22px}
}
/* short viewports (phones / small tablets in landscape) */
@media (max-height:520px) and (orientation:landscape){
  body.ss-page .ss-hero-stage{padding-top:72px!important;align-items:center}
  body.ss-page .ss-hero-copy .ss-eyebrow{display:none}
  body.ss-page .ss-hero-copy .ss-h1 .elementor-heading-title{font-size:30px!important;line-height:1.1}
  body.ss-page .ss-hero-copy .ss-h1{margin-bottom:10px!important}
  body.ss-page .ss-hero-copy .ss-body,body.ss-page .ss-hero-copy .ss-body p{font-size:14px;line-height:1.45;max-width:520px}
  body.ss-page .ss-hero-copy .ss-body{margin-bottom:16px!important}
  body.ss-page .ss-hero-copy .ss-btn .elementor-button{height:38px;padding:0 18px}
  body.ss-page .ss-hero-hint{display:none}
  .ss-ind__track{height:auto}
  .ss-ind__panel{height:360px}
}
/* tablet portrait: give the two-column sections breathing room */
@media (min-width:768px) and (max-width:1024px){
  body.ss-page .ss-hero-copy .ss-h1 .elementor-heading-title{font-size:44px}
  .ss-ind{--h:460px}
  body.ss-page .ss-contact-cols > .e-con-inner{flex-direction:column!important}
  body.ss-page .ss-contact-cols > .e-con-inner > .e-con{width:100%!important;flex:0 0 auto!important}
}
/* very large screens (TV, 27"+ monitors): scale the hero and marquee, keep content measured */
@media (min-width:1800px){
  body.ss-page .ss-hero-copy{max-width:860px}
  body.ss-page .ss-hero-copy .ss-h1 .elementor-heading-title{font-size:64px}
  body.ss-page .ss-hero-copy .ss-body,body.ss-page .ss-hero-copy .ss-body p{font-size:21px;max-width:720px}
  body.ss-page .ss-hero-copy .ss-eyebrow .elementor-heading-title{font-size:13px}
  .ss-marquee span{font-size:24px}
  .ss-ind{--h:600px}
}
@media (min-width:2400px){
  body.ss-page .ss-hero-copy .ss-h1 .elementor-heading-title{font-size:76px}
  body.ss-page .ss-hero-copy .ss-body,body.ss-page .ss-hero-copy .ss-body p{font-size:24px;max-width:820px}
  html{font-size:18px}
}
/* never allow horizontal scroll from the marquee or hero scene (clip, not hidden: hidden would make body a scroll container and break the sticky hero) */
body.ss-page{overflow-x:clip}
/* footer wraps on phones; TEP stays inline in the portrait caption; no sideways scroll */
@media (max-width:767px){
  body.ss-page .ss-footer-left{flex-wrap:wrap!important;gap:6px 10px}
  .ss-micro-credit{white-space:normal}
  .ss-micro-credit::before{content:none;margin:0}
  body.ss-page .ss-footer > .e-con-inner > .e-con, body.ss-page .elementor-element-ssx0063{flex-direction:column!important;align-items:flex-start!important;gap:14px}
}
.ss-portrait-cap .ss-tep{display:inline!important;font-size:11px;letter-spacing:1px;color:var(--muted);margin-left:4px}
html{overflow-x:clip}
body.ss-page{overflow-x:clip;max-width:100%}

/* phones/tablets: the active slide sits in normal flow so the visual always has real height */
@media (max-width:1024px){
  body.ss-page .ss-visual.ss-visual-photo{aspect-ratio:auto;height:auto;min-height:0;display:block}
  body.ss-page .ss-visual-photo img[data-ss-slide]{position:absolute}
  body.ss-page .ss-visual-photo img[data-ss-slide].is-on{position:relative;display:block;height:auto;aspect-ratio:4/3}
  body.ss-page .elementor-element-ssx0022 > .e-con-inner{display:flex;flex-direction:column!important;flex-wrap:nowrap!important}
  body.ss-page .elementor-element-ssx0022 > .e-con-inner > .e-con{width:100%!important;flex:0 0 auto!important;position:static!important}
}

/* ---------- 16. phone pass: one-row header, static hero ---------------- */
@media (max-width:767px){
  /* header: single row, logo left, burger + CTA right */
  body.ss-page .ss-header,
  body.ss-page .ss-header > .e-con,
  body.ss-page .ss-header .ss-auto{--flex-wrap-mobile:nowrap;flex-wrap:nowrap!important;flex-direction:row!important;align-items:center!important}
  body.ss-page .ss-header{height:64px;margin-bottom:-64px;justify-content:space-between!important}
  body.ss-page .ss-header > .e-con{width:auto!important;flex:0 0 auto!important}
  body.ss-page .ss-header .elementor-element-ssx0006{gap:10px!important;margin-left:auto}
  body.ss-page .ss-header .elementor-element-ssx0003{gap:8px!important}
  body.ss-page .ss-header-logo img{width:28px;height:28px}
  body.ss-page .ss-wordmark .elementor-heading-title{font-size:14px;white-space:nowrap}
  body.ss-page .ss-btn-header .elementor-button{height:36px;padding:0 14px;font-size:12px;white-space:nowrap}
  body.ss-page .ss-nav .elementor-menu-toggle{width:36px;height:36px}
  body.ss-page .ss-nav .elementor-nav-menu--dropdown{top:64px}

  /* hero: static full-bleed image, no scroll camera, no pin */
  body.ss-page .ss-hero-track{height:100svh!important;min-height:600px}
  body.ss-page .ss-hero-stage{position:relative!important;height:100svh;min-height:600px;padding-top:64px!important;align-items:center}
  body.ss-page .ss-hero-scene{transform:none!important;will-change:auto;width:100%!important;height:100%!important;top:0;left:0}
  body.ss-page .ss-hero-scene picture,body.ss-page .ss-hero-plate{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover;object-position:52% 78%;display:block}
  body.ss-page .ss-hero-inpaint,body.ss-page .ss-hero-screen,body.ss-page .ss-hero-laptop,body.ss-page .ss-hero-edgeblur{display:none!important}
  body.ss-page .ss-hero-scrim{inset:0;background:linear-gradient(180deg,rgba(12,15,20,.78) 0%,rgba(12,15,20,.62) 45%,rgba(12,15,20,.42) 72%,rgba(12,15,20,.6) 100%)}
  body.ss-page .ss-hero-copy{padding:0 22px!important;transform:translateY(-6vh)}
  body.ss-page .ss-hero-copy::before{display:none}
  body.ss-page .ss-hero-copy .ss-eyebrow .elementor-heading-title{font-size:10.5px;letter-spacing:2.5px}
  body.ss-page .ss-hero-copy .ss-h1 .elementor-heading-title{font-size:38px;line-height:1.08}
  body.ss-page .ss-hero-copy .ss-body,body.ss-page .ss-hero-copy .ss-body p{font-size:15.5px;line-height:1.55;max-width:34ch}
  body.ss-page .ss-hero-btns{flex-direction:column!important;align-items:stretch!important;width:100%!important;max-width:320px;margin:0 auto;gap:10px}
  body.ss-page .ss-hero-btns .elementor-button{width:100%;justify-content:center}
  body.ss-page .ss-hero-hint{bottom:18px;font-size:10px}
}
/* carousel mode: only the centred (active) card shows its video */
@media (max-width:1024px){
  .ss-ind__panel .ss-ind__video{opacity:0}
  .ss-ind__panel.is-active .ss-ind__video{opacity:1}
}

/* ---------- 17. phone dropdown menu ---------------------------------- */
@media (max-width:767px){
  body.ss-page .ss-header .ss-nav{position:static}
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:fixed!important;left:0!important;right:0!important;top:64px!important;width:100%!important;max-width:none!important;
    margin:0!important;padding:18px 0 22px!important;z-index:60;
    background:var(--surface)!important;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    box-shadow:0 24px 40px rgba(0,0,0,.35)!important;
  }
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown li{width:100%}
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown a.elementor-item,
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown a.elementor-item:focus{
    display:block!important;padding:18px 24px!important;font-family:'Space Grotesk',sans-serif!important;
    font-size:22px!important;font-weight:500!important;line-height:1.2!important;letter-spacing:-.01em;
    color:var(--text)!important;background:transparent!important;border:0!important;
  }
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown li + li a.elementor-item{border-top:1px solid var(--border)!important}
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown a.elementor-item:before,
  body.ss-page .ss-header .ss-nav .elementor-nav-menu--dropdown a.elementor-item:after{display:none!important}
}