/* ==================================================================
   0. FONTS — self-hosted Inter, the four weights the design uses.
      Never Google's CDN: a German court held that loading fonts from it
      transmits visitor IPs without consent, and these pages sell GDPR
      and NIS2 compliance. Served here from the site so the proof renders
      with the same metrics as the frame.
   ================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/Inter-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/Inter-Medium.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/Inter-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/Inter-Bold.woff2") format("woff2")}

/* ==================================================================
   1. TOKENS — from Figma variable collections "1. Primitive" / "2. Semantic"
      (get_variable_defs on 95:472). These map 1:1 to theme.json.
   ================================================================== */
:root{
  --ls-text-primary:#1F2937;
  --ls-text-brand:#005653;
  --ls-text-secondary:#5B5B5B;
  --ls-text-muted:#8A9199;
  --ls-text-inverse:#FFFFFF;
  --ls-text-link:#016E6A;
  --ls-text-accent-on-dark:#D4E9BA;
  --ls-accent-marker:#80BE35;
  --ls-accent-on-accent:#1F2937;
  /* Lime, for accent type and hairlines ON DARK only. Raw hex in Figma
     (no variable binding) — nodes 90:390 line 3 and 90:559-561. */
  --ls-accent-lime:#A8E06A;
  --ls-action-primary:#005653;
  --ls-action-primary-text:#FFFFFF;
  --ls-surface-page:#FFFFFF;
  --ls-surface-subtle:#F4F6F7;
  --ls-surface-accent:#F2F8EC;
  --ls-border-default:#DDE1E4;
  --ls-radius-sm:4px;
  --ls-container:1200px;
  --ls-gutter:120px;
  --ls-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Section photography — Figma's own source bitmaps, pulled from the
     frames' image fills via download_assets (NOT re-exports of the frame,
     and NOT substitutes from the sourcing notes).
     breather 2400x1600 · approach 2400x1600 · hero 2400x1380 */
  --ls-hero-image:url("/wp-content/uploads/2026/08/logicsure-hero-cyber-security-2400.jpg");
  --ls-breather-image:url("/wp-content/uploads/2026/08/logicsure-breather-cyber-security.jpg");
  --ls-approach-image:url("/wp-content/uploads/2026/08/logicsure-approach-cyber-security.jpg");
}

/* ==================================================================
   2. RESET + BASE
   ================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ls-font);
  font-size:15px;line-height:1.65;letter-spacing:0;font-weight:400;
  color:var(--ls-text-secondary);
  background:var(--ls-surface-page);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,ul,li,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* Shared: the 1200 container inside a 120 gutter */
.ls-container{
  width:100%;max-width:var(--ls-container);
  margin-inline:auto;
}
.ls-section{padding-inline:var(--ls-gutter)}

/* Type roles, straight off the Figma text styles */
.ls-eyebrow{                     /* Label/Eyebrow 600 11 / 1.3 / +1.6 */
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;line-height:1.3;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ls-text-brand);
}
.ls-eyebrow::before{content:"";width:24px;height:2px;background:var(--ls-accent-marker);flex:none}
.ls-eyebrow--on-dark{color:var(--ls-text-accent-on-dark)}

.ls-h2{                          /* 700 34 / 1.2 / -0.3 */
  font-size:34px;font-weight:700;line-height:1.2;letter-spacing:-.3px;
  color:var(--ls-text-brand);
}
.ls-h2--on-dark{color:var(--ls-text-inverse)}
.ls-h4{font-size:17px;font-weight:600;line-height:1.35;letter-spacing:0;color:var(--ls-text-brand)}
.ls-body-lg{font-size:17px;font-weight:400;line-height:1.6}
.ls-body{font-size:15px;font-weight:400;line-height:1.65}
.ls-body-sm{font-size:13.5px;font-weight:400;line-height:1.6}

/* Button — component 51:33. Accent is the only sanctioned green-behind-text
   use (label #1F2937 on #80BE35 = 8.39:1), for dark teal bands only. */
.ls-btn{
  display:inline-flex;align-items:center;
  font-size:15px;font-weight:600;line-height:1.2;letter-spacing:.1px;
  padding:14px 24px;border-radius:var(--ls-radius-sm);border:0;
  cursor:pointer;white-space:nowrap;
}
.ls-btn--primary{background:var(--ls-action-primary);color:var(--ls-action-primary-text)}
.ls-btn--accent{background:var(--ls-accent-marker);color:var(--ls-accent-on-accent)}
.ls-btn--ghost{
  background:transparent;color:var(--ls-text-inverse);
  border:1px solid rgba(255,255,255,.55);
}

/* ==================================================================
   3. HEADER — node 95:473 (master 54:2), 1440x84
   ================================================================== */
.ls-header{
  height:84px;background:var(--ls-surface-page);
  border-bottom:1px solid var(--ls-border-default);
  display:flex;align-items:center;padding-inline:var(--ls-gutter);
}
.ls-header__inner{display:flex;align-items:center;gap:40px;width:100%;max-width:var(--ls-container);margin-inline:auto}
/* The designer's lockup carries the tagline on one wide line, so it is
   3.553:1 against the plain wordmark's 4.626:1 — at 220px it stands 62px
   tall and still clears the 84px header with 11px either side. The header
   height is unchanged, which is what keeps all 15 frame heights valid. */
.ls-header__logo{width:220px;height:62px;object-fit:contain;flex:none}
.ls-header__spacer{flex:1}
.ls-nav{display:flex;align-items:center;gap:32px}
.ls-nav__link{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 0;font-size:15px;line-height:1.65;color:var(--ls-text-primary);
}
.ls-nav__link.is-active{color:var(--ls-text-brand)}
/* active is marked by a green rule, never by green text.
   Every link carries the rule so all three boxes are the same height —
   the active one just colours it in. Without this the active item is 8px
   taller (6px gap + 2px rule) and, because .ls-nav centres its children,
   its label sat ~4px above "About" and "Contact". */
.ls-nav__link::after{content:"";display:block;width:100%;height:2px;background:transparent}
.ls-nav__link.is-active::after{background:var(--ls-accent-marker)}
.ls-header .ls-btn{flex:none}

/* ==================================================================
   4. HERO — node 95:474, 1440x480
   Scrim runs LIGHT to DARK left to right: the photo reads on the left,
   the type sits over the dark end. (The Divi build had this reversed.)
   ================================================================== */
.ls-hero{
  min-height:480px;display:flex;align-items:center;
  padding-inline:var(--ls-gutter);
  background-color:var(--ls-teal-900,#003D3B);
  background-image:
    linear-gradient(90deg,rgba(0,61,59,.34) 0%,rgba(0,61,59,.62) 32%,rgba(0,49,47,.86) 62%,rgba(0,49,47,.95) 100%),
    var(--ls-hero-image);
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  /* The frames crop the hero photo to a band of its height rather than
     centring it — AI Solutions shows 20%–78%, Salesforce 34%–84%. The
     equivalent CSS focal point is ty/(1-d), emitted per page as
     --ls-hero-focus by logicsure_page_images(). */
  background-position:center center,center var(--ls-hero-focus,50%);
}
.ls-hero__inner{position:relative;width:100%;max-width:var(--ls-container);margin-inline:auto}
/* Decorative shield — node 95:661, 120x120, x1130/y180, opacity .85.
   Dead-centre vertically (180+60 = 240 of 480), 70px inside the container
   right edge, so it is pinned to the container not a 1440 canvas. */
.ls-hero__mark{
  position:absolute;right:70px;top:50%;transform:translateY(-50%);
  width:120px;height:120px;pointer-events:none;
}
.ls-hero__copy{display:flex;flex-direction:column;gap:18px;width:640px;max-width:100%}
.ls-hero__crumb{
  font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.4px;
  color:var(--ls-text-inverse);opacity:.73;
}
/* .73 not .60 — over this photo and scrim .60 measures 3.6:1, under the
   4.5:1 AA floor for 12px. Figma nodes 95:476 and 177:944-1038 were
   raised to .73 (4.53:1) on 2026-08-05 so frame and build agree. */
.ls-hero__crumb a:hover{opacity:1;text-decoration:underline}
.ls-hero__title{
  font-size:46px;font-weight:700;line-height:1.14;letter-spacing:-.8px;
  color:var(--ls-text-inverse);max-width:640px;
}
.ls-hero__lead{
  font-size:17px;font-weight:400;line-height:1.6;
  color:var(--ls-text-inverse);opacity:.82;width:580px;max-width:100%;
}
.ls-hero__actions{display:flex;gap:14px;padding-top:6px;flex-wrap:wrap}

/* ==================================================================
   5. ANCHOR ROW — node 95:510 (master 54:17), 1440x64, sticky
   ================================================================== */
.ls-anchors{
  position:sticky;top:0;z-index:20;
  height:64px;background:var(--ls-surface-subtle);
  border-top:1px solid var(--ls-border-default);
  border-bottom:1px solid var(--ls-border-default);
  display:flex;align-items:center;padding-inline:var(--ls-gutter);
}
.ls-anchors__list{display:flex;align-items:center;gap:36px;width:100%;max-width:var(--ls-container);margin-inline:auto}
.ls-anchors__link{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;
  font-size:15px;line-height:1.65;color:var(--ls-text-primary);
}
.ls-anchors__link.is-active{color:var(--ls-text-brand)}
.ls-anchors__link.is-active::after{content:"";display:block;width:56px;height:2px;background:var(--ls-accent-marker)}
[id]{scroll-margin-top:112px}

/* ==================================================================
   6. OVERVIEW — node 95:511, 1440x567
   Two columns: eyebrow left (300), copy right (820). The 26px teal lead
   IS the section headline — there is no separate H2.
   ================================================================== */
.ls-overview{background:var(--ls-surface-page);padding-block:100px}
.ls-overview__inner{display:flex;align-items:flex-start;gap:72px}
.ls-overview__aside{width:300px;flex:none}
.ls-overview__body{width:820px;max-width:100%;display:flex;flex-direction:column;gap:20px}
.ls-overview__lead{
  font-size:26px;font-weight:600;line-height:1.32;letter-spacing:-.1px;
  color:var(--ls-text-brand);max-width:760px;
}
.ls-overview__body p:not(.ls-overview__lead){color:var(--ls-text-secondary);max-width:760px}

/* ==================================================================
   7. IMAGE BREATHER — node 103:537, 1440x360
   ================================================================== */
.ls-breather{
  height:360px;display:flex;align-items:flex-end;
  padding:0 0 36px;
  background-color:var(--ls-teal-950,#00312F);
  background-image:
    linear-gradient(180deg,rgba(0,49,47,0) 0%,rgba(0,49,47,.2) 42%,rgba(0,49,47,.7) 78%,rgba(0,49,47,.88) 100%),
    var(--ls-breather-image);
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  /* Frame crops this photo to 30%–67.5% of its height on every page. */
  background-position:center center,center 48%;
}
.ls-breather__caption{
  width:560px;display:flex;flex-direction:column;gap:8px;
  padding-left:var(--ls-gutter);
}
.ls-breather__rule{width:40px;height:3px;background:var(--ls-accent-marker)}
.ls-breather__text{font-size:24px;font-weight:600;line-height:1.28;color:var(--ls-text-inverse)}

/* ==================================================================
   8. SOLUTIONS — node 95:520, 1440x1334
   Background is #F4F6F7 (surface/subtle) — a cool grey, NOT a green tint.
   ================================================================== */
.ls-solutions{
  position:relative;overflow:hidden;
  background:var(--ls-surface-subtle);
  padding-block:100px 110px;
}
/* Deliberately NOT positioned — the watermark below anchors to the section
   so its bleed stays constant as the viewport grows. */
.ls-solutions__inner{display:flex;flex-direction:column;gap:16px}
/* Ghost watermark — node 95:521, 150px/700, tracking -4, #E6E9EB.
   Frame puts it at x=-50, y=28 relative to the SECTION, so it bleeds 50px
   off the left edge of the canvas. Anchoring it to the 1200 container
   instead makes the bleed shrink as the window widens and disappear
   entirely past ~1540, which is not what the frame shows. */
.ls-solutions__watermark{
  position:absolute;left:-50px;top:28px;
  font-size:150px;font-weight:700;letter-spacing:-4px;line-height:1.21;
  color:#E6E9EB;pointer-events:none;user-select:none;z-index:0;
}
/* lift real content above the watermark without pulling the watermark
   back into the flex flow — it is absolute and must stay that way, or it
   adds its own 182px line box to the column and the section grows ~199px */
.ls-solutions__inner > *:not(.ls-solutions__watermark){position:relative;z-index:1}
.ls-solutions__intro{color:var(--ls-text-secondary);max-width:760px}
.ls-solutions .ls-h2{max-width:900px}

/* AI band — node 147:903, 1200x113, #005653, square corners */
.ls-aiband{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:32px;
  min-height:113px;padding:28px 32px;
  background:var(--ls-action-primary);
}
/* Orb — node 147:904, 420x420 at band-local x880/y-180,
   #80BE35 at 30%, Figma LAYER_BLUR 130 (CSS blur ≈ radius/2). */
.ls-aiband__orb{
  position:absolute;left:880px;top:-180px;width:420px;height:420px;
  border-radius:50%;background:var(--ls-accent-marker);opacity:.3;
  filter:blur(65px);pointer-events:none;
}
.ls-aiband > *:not(.ls-aiband__orb){position:relative;z-index:1}
.ls-aiband__chip{
  width:52px;height:52px;flex:none;border-radius:0;
  background:var(--ls-accent-marker);color:var(--ls-accent-on-accent);
  display:flex;align-items:center;justify-content:center;
}
.ls-aiband__copy{flex:1;min-width:0}
.ls-aiband__title{font-size:19px;font-weight:600;line-height:1.35;color:var(--ls-text-inverse)}
.ls-aiband__desc{font-size:15px;line-height:1.65;color:var(--ls-text-inverse);opacity:.84}
.ls-aiband__cta{flex:none;font-size:15px;line-height:1.65;color:var(--ls-text-accent-on-dark);white-space:nowrap}
.ls-aiband__cta:hover{text-decoration:underline}

.ls-group{display:flex;flex-direction:column;gap:14px;padding-top:26px}
.ls-group__label{
  font-size:11px;font-weight:600;line-height:1.3;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ls-text-muted);
}
.ls-cards{display:flex;flex-wrap:wrap;gap:20px}
/* Cards: 285 wide, gap 20, pitch 305 — 285x4 + 20x3 = 1200 exactly.
   Square corners with a single 1px bottom rule. Not rounded cards. */
.ls-card{
  width:285px;flex:none;display:flex;flex-direction:column;gap:12px;
  padding:24px;background:var(--ls-surface-page);
  border-radius:0;border-bottom:1px solid var(--ls-border-default);
}
/* Card height is content-driven, exactly as in the frames: 24 padding,
   24 icon, 12, 23 title, 12, body, 24 padding. A three-line body gives
   185, four lines 207, five lines 230 — the numbers the frames show.
   Cards in a row equalise through the flex row's default stretch, so a
   longer body in one card lifts its neighbours rather than leaving a
   hardcoded height that is only right on the page it was measured on. */
.ls-cards{align-items:stretch}
.ls-card__icon{width:24px;height:24px;color:var(--ls-text-brand);flex:none}
.ls-card__title{font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-text-brand)}
.ls-card__body{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}

/* ==================================================================
   9. WHERE TO START — node 124:631, 1440x162
   ================================================================== */
.ls-strip{
  background:var(--ls-surface-accent);
  border-top:4px solid var(--ls-accent-marker);
  /* Figma's 4px rule is an INSIDE stroke, so it sits within the 162px
     band rather than adding to it. Padding-top drops to 40 so content
     still starts 44 from the top edge: 4 + 40 + 74 + 44 = 162. */
  padding-block:40px 44px;
}
.ls-strip__inner{display:flex;align-items:center;gap:48px}
.ls-strip__copy{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.ls-strip__label{
  font-size:11px;font-weight:600;line-height:1.3;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--ls-text-brand);
}
.ls-strip__body{color:var(--ls-text-secondary);max-width:760px}
/* No width. Every Button instance in the frames hugs its label with 24px
   of side padding — 172 for "Talk to an Expert", 124 for "Talk To Us".
   The 225/228 that used to sit here were measured off Cyber's longer
   original labels and left behind when they were standardised. */
.ls-strip .ls-btn{flex:none}

/* ==================================================================
   10. SERVICES — node 95:569, 1440x1037
   Five full-width rows, each 1200x135, no gap, 1px top rule on every row
   (so there is a rule above row 1 and none below row 5).
   ================================================================== */
.ls-services{background:var(--ls-surface-page);padding-block:100px 110px}
.ls-services__inner{display:flex;flex-direction:column;gap:16px}
.ls-services .ls-h2{max-width:900px}
.ls-services__intro{color:var(--ls-text-secondary);max-width:780px}
/* Rows size to their own content, which is what the frames do: Cloud
   Technologies runs 135/112/135/135/112 because two of its bodies wrap
   to two lines rather than three. Do not equalise them — a uniform pitch
   is a coincidence of the copy on most pages, not a rule. */
.ls-services__list{display:flex;flex-direction:column;gap:0;padding-top:22px}
.ls-service{
  display:flex;align-items:flex-start;gap:32px;
  padding:30px 0;border-top:1px solid var(--ls-border-default);
  /* Row height is content-driven: 30 padding, the taller of the 52 chip
     and the body, 30 padding. That yields 112 where the body runs to two
     lines and 135 where it runs to three — matching each frame, instead
     of holding one page's pitch across all of them. */
}
.ls-service__chip{
  width:52px;height:52px;flex:none;border-radius:0;
  background:var(--ls-surface-accent);color:var(--ls-text-brand);
  display:flex;align-items:center;justify-content:center;
}
.ls-service__title{width:320px;flex:none;font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-text-brand)}
.ls-service__body{flex:1;min-width:0;color:var(--ls-text-secondary)}

/* ==================================================================
   11. OUR APPROACH — node 95:591, 1440x483
   ================================================================== */
.ls-approach{
  background-color:var(--ls-teal-900,#003D3B);
  background-image:
    linear-gradient(90deg,rgba(0,86,83,.72) 0%,rgba(0,61,59,.86) 50%,rgba(0,61,59,.93) 100%),
    var(--ls-approach-image);
  background-repeat:no-repeat,no-repeat;
  background-size:cover,cover;
  background-position:center center,center center;
  padding-block:100px 110px;
}
.ls-approach__inner{display:flex;flex-direction:column;gap:16px}
.ls-approach .ls-h2{max-width:1000px}
.ls-approach__steps{display:flex;align-items:flex-start;gap:24px;padding-top:34px}
.ls-step{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:18px;
}
.ls-step__num{font-size:44px;font-weight:700;line-height:1.15;letter-spacing:-1px;color:var(--ls-text-accent-on-dark)}
.ls-step__title{font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-text-inverse)}
.ls-step__body{font-size:13.5px;line-height:1.6;color:var(--ls-text-inverse);opacity:.75}

/* ==================================================================
   12. WHY LOGICSURE — node 95:618, 1440x499
   ================================================================== */
.ls-why{background:var(--ls-surface-page);padding-block:100px 110px}
.ls-why__inner{display:flex;flex-direction:column;gap:16px}
.ls-why .ls-h2{max-width:900px}
.ls-why__pillars{display:flex;align-items:flex-start;gap:24px;padding-top:30px}
.ls-pillar{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--ls-border-default);padding-top:18px;
}
.ls-pillar__rule{width:28px;height:3px;background:var(--ls-accent-marker)}
.ls-pillar__title{font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-text-brand)}
.ls-pillar__body{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}

/* ==================================================================
   13. CTA — node 95:640, 1440x245, flat #005653, no image
   ================================================================== */
.ls-cta{background:var(--ls-action-primary);padding-block:72px}
.ls-cta__inner{display:flex;align-items:center;gap:60px}
.ls-cta__copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.ls-cta__body{font-size:15px;line-height:1.65;color:var(--ls-text-inverse);opacity:.8;max-width:640px}
.ls-cta .ls-btn{flex:none}

/* ==================================================================
   14. FOOTER — node 95:645 (master 58:5), 1440x373
   ================================================================== */
.ls-footer{
  background:var(--ls-surface-subtle);
  border-top:1px solid var(--ls-border-default);
  padding:64px var(--ls-gutter) 28px;
}
.ls-footer__inner{display:flex;flex-direction:column;gap:32px}
/* Figma's four columns are 330 + 400 + 180 + 210 = 1120, and with its
   40px gaps that totals 1240 inside a 1200 container — the frame simply
   clips the fourth column. Keeping the column widths exact and letting
   space-between distribute the remaining 80px (26.67 each) preserves the
   design intent without cutting "Start a Conversation" in half. */
.ls-footer__cols{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.ls-footer__col{display:flex;flex-direction:column;gap:9px;flex:none}
.ls-footer__col--brand{width:330px}
.ls-footer__col--caps{width:400px}
.ls-footer__caps-grid{display:flex;gap:24px}
.ls-footer__subcol{width:188px;display:flex;flex-direction:column;gap:9px}
.ls-footer__col--company{width:180px}
.ls-footer__col--contact{width:210px}
/* Brand column leads with the lockup instead of a text "LogicSure"
   heading. Sized to match the header so the mark reads as one asset
   across the page. The 4px inset aligns the wordmark's optical left edge
   with the column text below it — the PNG has no bearing of its own. */
.ls-footer__brand{display:block;margin-bottom:5px}
.ls-footer__logo{width:220px;height:62px;object-fit:contain;display:block;margin-left:-4px}
.ls-footer h4{font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-text-brand)}
.ls-footer p,.ls-footer a{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}
.ls-footer a:hover{text-decoration:underline}
.ls-footer .ls-link{color:var(--ls-text-link)}
.ls-footer__legal{
  display:flex;align-items:center;
  padding-top:18px;border-top:1px solid var(--ls-border-default);
}
.ls-footer__legal p{flex:1;font-size:13.5px;color:var(--ls-text-muted)}
.ls-footer__legal p:last-child{flex:none;text-align:right}

/* ==================================================================
   15. RESPONSIVE — matches the frame at >=1440, fluid above, stacks below.
   Confirmed requirement: never a locked 1440 canvas, never empty side
   margins on large monitors, never clipped content on phones.
   ================================================================== */
@media (max-width:1360px){
  :root{--ls-gutter:64px}
}
@media (max-width:1200px){
  .ls-hero__mark{display:none}
  .ls-cards{justify-content:flex-start}
  .ls-card{width:calc(50% - 10px)}
  .ls-approach__steps{flex-wrap:wrap}
  .ls-step{flex:1 1 calc(33.333% - 16px)}
  .ls-why__pillars{flex-wrap:wrap}
  .ls-pillar{flex:1 1 calc(50% - 12px)}
  .ls-footer__cols{flex-wrap:wrap}
}
@media (max-width:1000px){
  :root{--ls-gutter:40px}
  .ls-overview__inner{flex-direction:column;gap:24px}
  .ls-overview__aside,.ls-overview__body{width:100%}
  .ls-hero__title{font-size:38px}
  .ls-h2{font-size:28px}
  .ls-aiband{flex-wrap:wrap;gap:20px}
  .ls-aiband__cta{width:100%}
  .ls-strip__inner{flex-direction:column;align-items:flex-start;gap:20px}
  .ls-cta__inner{flex-direction:column;align-items:flex-start;gap:28px}
  .ls-nav,.ls-header__spacer{display:none}
}
@media (max-width:720px){
  :root{--ls-gutter:20px}
  .ls-hero{min-height:0;padding-block:56px}
  .ls-hero__title{font-size:30px;letter-spacing:-.4px}
  .ls-hero__copy,.ls-hero__lead{width:100%}
  .ls-card{width:100%}
  .ls-step{flex:1 1 100%}
  .ls-pillar{flex:1 1 100%}
  .ls-service{flex-direction:column;gap:16px}
  .ls-service__title{width:100%}
  .ls-anchors{overflow-x:auto}
  .ls-anchors__list{gap:24px}
  .ls-solutions__watermark{font-size:96px;left:-32px;top:20px}
  .ls-footer__col,.ls-footer__subcol{width:100%}
  .ls-footer__legal{flex-direction:column;align-items:flex-start;gap:6px}
  .ls-footer__legal p:last-child{text-align:left}
}

/* ==================================================================
   16. WORDPRESS BLOCK SCAFFOLDING
   Core injects margin-block-start: var(--wp--style--block-gap) (24px)
   on every block after the first inside a flow container. Our sections
   already space themselves with flex gap values taken from the frame,
   so the injected margin is additive — it pushed the page from 5688px
   to 7030px. Cleared inside the ls- namespace only, so core blocks used
   anywhere else keep their normal behaviour.
   ================================================================== */
.ls-container > *,
.ls-hero__inner > *, .ls-hero__copy > *,
.ls-overview__inner > *, .ls-overview__aside > *, .ls-overview__body > *,
.ls-breather > *, .ls-breather__caption > *,
.ls-solutions__inner > *, .ls-group > *, .ls-cards > *, .ls-card > *, .ls-aiband > *,
.ls-strip__inner > *, .ls-strip__copy > *,
.ls-services__inner > *, .ls-services__list > *, .ls-service > *,
.ls-approach__inner > *, .ls-approach__steps > *, .ls-step > *,
.ls-why__inner > *, .ls-why__pillars > *, .ls-pillar > *,
.ls-cta__inner > *, .ls-cta__copy > *,
.ls-footer__inner > *, .ls-footer__cols > *, .ls-footer__col > *, .ls-footer__subcol > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Core wraps some blocks in extra flow containers; make those transparent
   to layout so a wrapper never becomes an unintended flex item. */
.ls-hero__copy > .wp-block-group,
.ls-card > .wp-block-group,
.ls-step > .wp-block-group,
.ls-pillar > .wp-block-group { display: contents; }

/* Sections butt directly against each other — the frame has no gaps
   between bands. Core's post-content flow container was adding 24px
   between each of the ten sections (240px over the page). */
.entry-content.wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

/* Same bug one level up, and the one this reset originally missed.
   .wp-site-blocks is itself a flow container, so core gives <main> and the
   footer template-part a 24px margin-block-start each — a band of dead
   space under the header and another above the footer, on EVERY page.
   Invisible to a check that sums .entry-content's children, because both
   gaps fall outside .entry-content. Reset at the root so header, main and
   footer stack flush, exactly as the frames have them. */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }

/* Editor-only: Custom HTML blocks render on a white card in the editing
   canvas, which makes the hero breadcrumb and buttons look like errors.
   Front end is unaffected. */
.editor-styles-wrapper .wp-block-html { background: transparent; }

/* Image breather height on wide monitors.
   The frame pins this band at 360px while the page is fluid, so a wider
   viewport scales the photo up and shows a thinner horizontal slice of
   it — at 2545px you see the bottom 21% instead of the bottom 37%, which
   crops the people out of the meeting-room shot entirely.
   25vw resolves to exactly 360px at the 1440 design width, so parity with
   Figma is unchanged; above that the band grows and keeps its subject. */
.ls-breather { height: clamp(360px, 25vw, 520px); }

/* Solutions grid: three-up pages.
   The card is 285px because the grid is four-across — 285×4 + 20×3 = 1200
   exactly. A three-card row therefore stops at 895 and leaves a 305px
   hole, a full quarter of the container. On AI Solutions, Application
   Development, QA & Testing and Digital Transformation every group is
   three-up, so that hole repeats down the whole section and reads as a
   fault rather than a trailing partial row.
   Those four pages carry .ls-solutions--3up and stretch their cards to
   386.67 so each row fills. Pages containing a four-card row (Cyber,
   Data, Salesforce, Cloud) keep 285, so card width stays consistent
   within any single page.
   Scoped above 1200 only, so the responsive stacking below is untouched. */
@media (min-width: 1201px) {
  .ls-solutions--3up .ls-card { width: calc((100% - 40px) / 3); }
}

/* ==================================================================
   17. LANDING AND MARKETING PAGES
   Sections that appear on Capabilities landing, About Us and Home
   rather than on a capability page.
   ================================================================== */

/* Hero variant — node 139:697, 1440x470. No shield mark, a 660 copy
   column rather than 640, and a slightly heavier scrim (40→96 against
   the capability hero's 34→95). */
.ls-hero--landing{
  min-height:470px;
  background-image:
    linear-gradient(90deg,rgba(0,61,59,.40) 0%,rgba(0,61,59,.66) 30%,rgba(0,61,59,.86) 58%,rgba(0,49,47,.96) 100%),
    var(--ls-hero-image);
}
.ls-hero--landing .ls-hero__copy{width:660px}
/* About Us is NOT on the same scrim as the Capabilities landing: node
   142:798 opens two points lighter (.38) and darkens two points harder at
   the 58% stop (.88). Small, but it is a different paint. */
.ls-hero--about{
  background-image:
    linear-gradient(90deg,rgba(0,61,59,.38) 0%,rgba(0,61,59,.66) 30%,rgba(0,61,59,.88) 58%,rgba(0,49,47,.96) 100%),
    var(--ls-hero-image);
}

/* What We Do — node 139:699, 1440x884. Eight capability cards, 285 wide
   on a 20 gap, four to a row. Row one runs 233 and row two 211 because
   the bodies differ; that falls out of the flex row's default stretch. */
.ls-whatwedo{position:relative;overflow:hidden;background:var(--ls-surface-subtle);padding-block:100px 110px}
.ls-whatwedo__inner{display:flex;flex-direction:column;gap:16px}
.ls-whatwedo__watermark{
  position:absolute;left:-60px;top:30px;
  font-size:150px;font-weight:700;letter-spacing:-4px;line-height:1.21;
  color:#E6E9EB;pointer-events:none;user-select:none;z-index:0;
}
.ls-whatwedo__inner > *:not(.ls-whatwedo__watermark){position:relative;z-index:1}
.ls-whatwedo__intro{font-size:17px;line-height:1.6;color:var(--ls-text-secondary);max-width:820px}
.ls-capgrid{display:flex;flex-wrap:wrap;align-items:stretch;gap:20px;padding-top:26px}
.ls-capcard{
  width:285px;flex:none;display:flex;flex-direction:column;gap:12px;
  padding:26px;background:var(--ls-surface-page);
  border-radius:0;border-bottom:1px solid var(--ls-border-default);
}
/* The two lead practices carry a 3px accent rule instead of the 1px grey
   one — nodes 90:432/90:436 on Home, 139:715/139:718 on the landing page.
   Every other card in both grids keeps #DDE1E4 at 1px. */
.ls-capcard--lead{border-bottom:3px solid var(--ls-accent-marker)}
.ls-capcard__icon{width:24px;height:24px;color:var(--ls-text-brand);flex:none}
.ls-capcard__title{font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-text-brand)}
.ls-capcard__body{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}

/* Ways to work — node 139:735, 1440x474. Three tiles on the accent
   surface, 384 wide with a 24 gap. */
.ls-ways{background:var(--ls-surface-page);padding-block:100px 110px}
.ls-ways__inner{display:flex;flex-direction:column;gap:16px}
.ls-ways__grid{display:flex;align-items:stretch;gap:24px;padding-top:26px}
.ls-way{
  flex:1;min-width:0;padding:26px;background:var(--ls-surface-accent);
  display:flex;flex-direction:column;gap:10px;
  /* 3px accent rule along the top — nodes 141:756/759/762, INSIDE stroke. */
  border-top:3px solid var(--ls-accent-marker);
}
.ls-way__title{font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-text-brand)}
.ls-way__body{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}

/* Approach band, orb variant — the landing page drops the photograph for
   a single soft ellipse in the top-right corner, 680x680 at x=1000 in a
   1440 frame, so it bleeds 240 past the right edge. */
.ls-approach--orb{position:relative;overflow:hidden;background-image:none;background-color:var(--ls-teal-900,#003D3B)}
.ls-approach__orb{
  position:absolute;right:-240px;top:-250px;width:680px;height:680px;
  border-radius:50%;background:rgba(4,131,124,.45);
  /* Figma LAYER_BLUR 150 on node 141:724. CSS blur takes half the Figma
     radius, the same conversion the AI band orb uses. */
  filter:blur(75px);
  pointer-events:none;z-index:0;
}
.ls-approach--orb .ls-approach__inner{position:relative;z-index:1}

@media (max-width:1200px){
  .ls-capcard{width:calc(50% - 10px)}
  .ls-ways__grid{flex-wrap:wrap}
  .ls-way{flex:1 1 100%}
}
@media (max-width:900px){
  .ls-hero--landing .ls-hero__copy{width:100%}
  .ls-capcard{width:100%}
  .ls-whatwedo__watermark{font-size:96px;left:-32px;top:22px}
}

/* The frame does not mark these cards as links, but a capabilities index
   whose cards do not reach the capability pages is broken, so the whole
   card is a target. Hover is the one thing invented here: an unstyled
   link with no affordance is worse than a small departure from the frame. */
.ls-capcard{position:relative;transition:border-color .15s ease}
.ls-capcard__link{position:absolute;inset:0;z-index:2}
.ls-capcard:not(.ls-capcard--lead):hover{border-bottom-color:var(--ls-accent-marker)}
.ls-capcard:focus-within{outline:2px solid var(--ls-text-link);outline-offset:2px}

/* ------------------------------------------------------------------
   Block-gap reset, generalised. Section 16 lists containers one by one,
   which meant every new section silently reintroduced core's 24px
   margin-block-start on its children — the landing page's cards came out
   95px tall over the frame before this. Spacing in this design is always
   flex gap, never margin, so zero it across the whole ls- namespace and
   stop rediscovering the same bug on each new template.
   ------------------------------------------------------------------ */
.entry-content [class^="ls-"] > *,
.entry-content [class*=" ls-"] > *{margin-block-start:0;margin-block-end:0}

/* ==================================================================
   18. ABOUT US
   ================================================================== */

/* Who We Are — node 142:798, 1440x492. Two columns: a bare eyebrow on
   the left, the argument on the right. Same shape as the capability
   Overview but on a 300/820 split rather than 372/820. */
.ls-whoweare{background:var(--ls-surface-page);padding-block:100px}
.ls-whoweare__inner{display:flex;gap:80px}
.ls-whoweare__aside{width:300px;flex:none}
.ls-whoweare__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:20px}
.ls-whoweare__body p{max-width:760px}
.ls-whoweare__lead{font-size:26px;font-weight:600;line-height:1.3;color:var(--ls-text-brand)}

/* Mission and Vision — node 142:806, 1440x280. Brand teal, with the same
   corner ellipse the Capabilities approach band uses, at 560 rather
   than 680 and half-opacity rather than 45%. */
.ls-missionvision{
  position:relative;overflow:hidden;
  background:var(--ls-text-brand);padding-block:90px 96px;
}
.ls-missionvision__orb{
  position:absolute;right:-170px;top:-200px;width:560px;height:560px;
  border-radius:50%;background:rgba(4,131,124,.5);
  filter:blur(70px);                    /* LAYER_BLUR 140 on node 142:816 */
  pointer-events:none;z-index:0;
}
.ls-missionvision__inner{position:relative;z-index:1;display:flex;gap:80px}
.ls-mv{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.ls-mv__text{font-size:24px;font-weight:600;line-height:1.375;color:var(--ls-text-inverse)}

/* Technologies — node 142:816, 1440x604. Six domain tiles, 247 wide on a
   28 column gap and a 30 row gap, each hung under a 1px top rule. */
.ls-tech{background:var(--ls-surface-page);padding-block:100px 110px}
.ls-tech__inner{display:flex;gap:72px}
.ls-tech__aside{width:330px;flex:none;display:flex;flex-direction:column;gap:18px}
.ls-tech__intro{color:var(--ls-text-secondary)}
/* flex-start, not the default stretch: the frame lets the AI tile stop at
   155 while its row-mates run 182, rather than padding it out. */
.ls-tech__grid{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:flex-start;gap:30px 28px}
.ls-domain{
  width:247px;flex:none;padding-top:18px;
  border-top:1px solid var(--ls-border-default);
  display:flex;flex-direction:column;gap:10px;
}
.ls-domain__head{display:flex;align-items:center;gap:10px}
.ls-domain__icon{width:24px;height:24px;color:var(--ls-text-brand);flex:none}
.ls-domain__title{font-size:15px;font-weight:600;line-height:1.6;color:var(--ls-text-brand)}
.ls-domain__list{display:flex;flex-direction:column;gap:5px}
.ls-domain__list li{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}

@media (max-width:1200px){
  .ls-whoweare__inner,.ls-tech__inner{flex-direction:column;gap:36px}
  .ls-whoweare__aside,.ls-tech__aside{width:100%}
  .ls-domain{width:calc(50% - 14px)}
}
@media (max-width:900px){
  .ls-missionvision__inner{flex-direction:column;gap:36px}
  .ls-domain{width:100%}
}

/* ==================================================================
   19. HOME
   ================================================================== */

/* Hero / Home — node 90:385, 1440x620. Taller than the inner-page heroes
   and the photo is used whole (scaleMode FILL, identity transform), so no
   focal point is needed here. */
.ls-hero--home{
  min-height:620px;background-position:center center,center center;
  /* Home has its own scrim (node 90:558), NOT the capability one (95:660):
     heavier at the left edge (.40 vs .34) and it stays on #003D3B all the
     way to 58% before dropping to #00312F. */
  background-image:
    linear-gradient(90deg,rgba(0,61,59,.40) 0%,rgba(0,61,59,.66) 30%,rgba(0,61,59,.85) 58%,rgba(0,49,47,.96) 100%),
    var(--ls-hero-image);
}
.ls-hero--home .ls-hero__copy{width:640px;gap:20px}
.ls-hero--home .ls-hero__title{font-size:56px;line-height:1.125;letter-spacing:-1px}
/* Third line of the H1 is lime — node 90:390 carries two text segments. */
.ls-hero__title .ls-accent{color:var(--ls-accent-lime)}
.ls-hero--home .ls-hero__lead{max-width:560px}
/* Actions sit 8 off the lead here; the capability heroes use 6 (95:482). */
.ls-hero--home .ls-hero__actions{padding-top:8px}
/* Eyebrow variant: a 6px dot rather than the 24x2 rule used everywhere else. */
.ls-eyebrow--dot::before{width:6px;height:6px;border-radius:50%}
/* Three rings sharing a left edge and a vertical centre — nested, not
   concentric. Anchored 640 into the container, which is where x=760 lands
   in a 1440 frame with a 120 gutter. */
.ls-hero__ring{
  position:absolute;left:640px;top:50%;transform:translateY(-50%);
  border:1px solid var(--ls-accent-lime);border-radius:50%;pointer-events:none;
}
.ls-hero__ring--1{width:240px;height:240px;opacity:.22}
.ls-hero__ring--2{width:380px;height:380px;opacity:.15}
.ls-hero__ring--3{width:540px;height:540px;opacity:.09}

/* Shared link-out. The frames wrap these in a taller box than the text,
   so the padding is what reproduces the frame, not the line height. */
.ls-more{display:inline-block;font-size:15px;line-height:1.65;color:var(--ls-text-link)}
.ls-more--tight{padding-top:8px}
.ls-more--pad{padding-block:12px}
.ls-more--on-dark{color:var(--ls-text-accent-on-dark);padding-top:6px}

/* Pill chips — 36 tall, 13px side padding, fully rounded. */
.ls-chips{display:flex;flex-wrap:wrap;gap:8px}
/* On dark the chip border is white at .38 and the label sits at .88 —
   nodes 153:868-875. (.55 is the ghost BUTTON's border, not the chip's.) */
.ls-chip{
  border:1px solid rgba(255,255,255,.38);border-radius:999px;
  padding:7px 13px;font-size:13.5px;line-height:1.6;
  color:var(--ls-text-inverse);opacity:.88;
}
.ls-chip--light{
  border-color:var(--ls-border-default);background:var(--ls-surface-page);
  color:var(--ls-text-secondary);opacity:1;
}

/* Positioning — node 90:399, 1440x620. Copy left, photo right with a
   caption plate hanging 52 off its left edge. */
.ls-positioning{background:var(--ls-surface-page);padding-block:110px}
.ls-positioning__inner{display:flex;gap:64px;align-items:flex-start}
.ls-positioning__copy{width:660px;flex:none;padding-top:8px;display:flex;flex-direction:column;gap:24px}
.ls-positioning__h{font-size:44px;font-weight:700;line-height:1.18;letter-spacing:-.6px;color:var(--ls-text-brand)}
.ls-positioning__body{font-size:17px;line-height:1.6;color:var(--ls-text-secondary);max-width:620px}
.ls-positioning__photo{
  position:relative;width:470px;height:400px;flex:none;
  background-image:var(--ls-home-positioning-image);
  /* Node 118:538 is scaleMode CROP with imageTransform [[.66,0,.17],[0,1,0]]:
     the middle 66% of the width, full height, stretched onto the box. Cover
     would show 78% of the width instead, a looser shot than the frame.
     1/.66 = 151.515%, and tx/(1-a) = .17/.34 = 50% for the x position. */
  background-size:151.515% 100%;background-position:50% 50%;
  background-repeat:no-repeat;
}
/* Not a boxed plate: node 118:539 has a single 5px accent rule on its LEFT
   edge and a soft drop shadow, no border on the other three sides. */
.ls-positioning__plate{
  position:absolute;left:-52px;top:286px;width:322px;
  background:var(--ls-surface-page);
  border-left:5px solid var(--ls-accent-marker);
  box-shadow:0 10px 28px rgba(18,28,36,.16);
  padding:22px 26px 22px 24px;
}
.ls-positioning__plate p{font-size:16px;font-weight:600;line-height:1.375;color:var(--ls-text-brand)}

/* AI band — node 90:437, 1440x520. Full-bleed photo, accent edge rule. */
.ls-homeai{display:flex;background:var(--ls-text-brand)}
.ls-homeai__photo{
  width:560px;flex:none;position:relative;min-height:520px;
  background-image:var(--ls-home-ai-image);background-size:cover;background-position:center center;
}
.ls-homeai__photo::after,.ls-homesec__photo::after{
  content:"";position:absolute;right:0;top:0;width:5px;height:100%;
  background:var(--ls-accent-marker);
}
.ls-homeai__copy{
  flex:1;min-width:0;padding:51px 72px 50px;max-width:772px;
  display:flex;flex-direction:column;gap:18px;
}
.ls-homeai__h{font-size:40px;font-weight:700;line-height:1.15;letter-spacing:-.4px;color:var(--ls-text-inverse)}
.ls-homeai__body{font-size:17px;line-height:1.6;color:var(--ls-text-inverse);max-width:600px}

/* Security — node 90:452, 1440x642. Three full-bleed columns: photograph,
   teal headline panel, white body. */
.ls-homesec{display:flex;align-items:stretch}
.ls-homesec__photo{
  width:400px;flex:none;position:relative;min-height:642px;
  background-image:var(--ls-home-security-image);background-size:cover;background-position:center center;
}
.ls-homesec__panel{
  width:440px;flex:none;background:var(--ls-text-brand);
  padding:100px 48px;display:flex;flex-direction:column;gap:18px;
}
.ls-homesec__h{font-size:34px;font-weight:700;line-height:1.2;letter-spacing:-.3px;color:var(--ls-text-inverse);max-width:348px}
.ls-homesec__body{
  flex:1;min-width:0;background:var(--ls-surface-page);
  padding:100px 56px;display:flex;flex-direction:column;gap:18px;
}
.ls-homesec__body p{font-size:17px;line-height:1.6;color:var(--ls-text-secondary);max-width:424px}

@media (max-width:1360px){
  .ls-hero__ring{display:none}
}
@media (max-width:1200px){
  .ls-positioning__inner{flex-direction:column;gap:48px}
  .ls-positioning__copy{width:100%}
  .ls-homeai,.ls-homesec{flex-wrap:wrap}
  .ls-homeai__photo,.ls-homesec__photo{width:100%;min-height:320px}
  .ls-homesec__panel{width:100%}
  .ls-homeai__copy,.ls-homesec__body{padding:56px var(--ls-gutter)}
  .ls-homesec__panel{padding:56px var(--ls-gutter)}
}
@media (max-width:900px){
  .ls-hero--home .ls-hero__title{font-size:38px;letter-spacing:-.5px}
  .ls-hero--home .ls-hero__copy{width:100%}
  .ls-positioning__photo{width:100%}
  .ls-positioning__plate{left:0;top:auto;bottom:-24px;width:auto;max-width:322px}
}

/* ==================================================================
   20. CONTACT AND LEGAL
   ================================================================== */

/* Hero / Contact — node 143:860, 1440x350. Solid teal with the corner
   ellipse, no photograph. */
.ls-cthero{
  position:relative;overflow:hidden;
  background:var(--ls-teal-900,#003D3B);padding-block:84px;
}
.ls-cthero__orb{
  position:absolute;right:-190px;top:-260px;width:620px;height:620px;
  border-radius:50%;background:rgba(4,131,124,.5);
  filter:blur(75px);                    /* LAYER_BLUR 150 on node 143:861 */
  pointer-events:none;z-index:0;
}
.ls-cthero__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:16px}
.ls-cthero__title{font-size:42px;font-weight:700;line-height:1.16;letter-spacing:-.7px;color:var(--ls-text-inverse)}
.ls-cthero__lead{font-size:17px;line-height:1.6;color:var(--ls-text-inverse);max-width:680px}

/* Section / Contact — node 143:868, 1440x946. Form left on 680, sidebar
   right on 400. Section height is set by the sidebar, not the form. */
.ls-contact{background:var(--ls-surface-page);padding-block:90px 100px}
.ls-contact__inner{display:flex;gap:80px;align-items:flex-start}
.ls-form{width:680px;flex:none;display:flex;flex-direction:column;gap:20px}
.ls-form__note{font-size:15px;line-height:1.65;color:var(--ls-text-secondary)}
.ls-form__fields{display:flex;flex-direction:column;gap:20px}
.ls-form__row{display:flex;gap:20px}
.ls-field{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ls-field label{font-size:12px;font-weight:500;line-height:1.4;color:var(--ls-text-secondary)}
.ls-field input,.ls-field textarea,.ls-field select{
  font-family:inherit;font-size:15px;line-height:1.65;color:var(--ls-text-primary);
  background:var(--ls-surface-page);border:1px solid var(--ls-border-default);
  border-radius:var(--ls-radius-sm);padding:12px 14px;width:100%;
}
.ls-field input,.ls-field select{height:51px}
.ls-field textarea{height:132px;resize:vertical}
.ls-field ::placeholder{color:var(--ls-text-muted)}
.ls-field :focus-visible{outline:2px solid var(--ls-text-link);outline-offset:1px;border-color:var(--ls-text-link)}
.ls-form__actions{padding-top:6px}

.ls-aside{
  width:400px;flex:none;background:var(--ls-surface-subtle);
  border-top:4px solid var(--ls-accent-marker);padding:32px;  /* 143:877 */
  display:flex;flex-direction:column;gap:32px;
}
.ls-next{display:flex;flex-direction:column;gap:14px}
.ls-next__step{display:flex;gap:14px}
.ls-next__num{width:161px;flex:none;font-size:17px;font-weight:600;line-height:1.35;color:var(--ls-accent-marker)}
.ls-next__text{width:161px;flex:none;font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}
.ls-details{border-top:1px solid var(--ls-border-default);padding-top:24px;display:flex;flex-direction:column;gap:14px}
.ls-details p{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}
.ls-details strong{font-weight:600;color:var(--ls-text-primary)}

/* Hero / Legal — node 144:902, 1440x269. Quiet, on the subtle surface. */
.ls-lghero{
  background:var(--ls-surface-subtle);border-bottom:1px solid var(--ls-border-default);
  padding-block:72px 56px;
}
.ls-lghero__inner{display:flex;flex-direction:column;gap:14px}
.ls-lghero__crumb{font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.4px;color:var(--ls-text-muted)}
.ls-lghero__title{font-size:40px;font-weight:700;line-height:1.15;letter-spacing:-.6px;color:var(--ls-text-brand)}
.ls-lghero__meta{font-size:13.5px;line-height:1.6;color:var(--ls-text-muted)}

/* 404 — no Figma frame exists for this state, so it borrows the Legal hero
   shell (same surface, same title scale) rather than inventing a new one.
   Added 2026-08-07: the theme had no 404 template at all, so a bad URL
   rendered header and footer with nothing between them. */
/* .ls-btn--ghost is white-on-transparent and only legible over the dark
   heroes. On the 404's light surface it disappeared, so this is the
   light-background equivalent: brand text on a hairline border. */
.ls-btn--outline{
  background:transparent;color:var(--ls-text-brand);
  border:1px solid var(--ls-border-default);
}
.ls-btn--outline:hover{border-color:var(--ls-text-brand)}
.ls-404{padding-block:96px 104px}
.ls-404__lead{font-size:16px;line-height:1.65;color:var(--ls-text-secondary);max-width:560px}
.ls-404__actions{display:flex;gap:12px;padding-top:10px}

/* Section / Legal body — node 144:908. Sticky contents left, prose right. */
.ls-legal{background:var(--ls-surface-page);padding-block:72px 96px}
.ls-legal__inner{display:flex;gap:80px;align-items:flex-start}
.ls-toc{
  width:280px;flex:none;position:sticky;top:96px;
  border-left:1px solid var(--ls-border-default);padding:4px 0 4px 20px;
  display:flex;flex-direction:column;gap:12px;
}
.ls-toc__label{font-size:11px;font-weight:600;line-height:1.3;letter-spacing:1.6px;text-transform:uppercase;color:var(--ls-text-muted)}
.ls-toc a{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}
.ls-toc a:hover,.ls-toc a:focus-visible{color:var(--ls-text-brand)}
.ls-prose{flex:1;min-width:0;max-width:760px;display:flex;flex-direction:column;gap:18px}
.ls-prose h2{
  font-size:22px;font-weight:600;line-height:1.3;color:var(--ls-text-brand);
  padding-top:18px;
}
.ls-prose h2::after{content:"";display:block;width:28px;height:3px;background:var(--ls-accent-marker);margin-top:6px}
.ls-prose p,.ls-prose li{font-size:15px;line-height:1.65;color:var(--ls-text-secondary)}
.ls-prose ul{display:flex;flex-direction:column;gap:8px;padding-left:20px;list-style:disc}
.ls-prose strong{font-weight:600;color:var(--ls-text-primary)}
/* The drafts author their category grids as markdown pipe tables. Until
   2026-08-06 the converter had no table branch, so those rows reached the
   page as literal "| Category | Purpose |" paragraphs. Same type scale as
   .ls-prose p so the table reads as part of the prose column, with the
   header row on the accent hairline the h2 rules already use. */
.ls-prose table{
  width:100%;border-collapse:collapse;
  font-size:15px;line-height:1.65;color:var(--ls-text-secondary);
}
.ls-prose th{
  text-align:left;font-weight:600;color:var(--ls-text-primary);
  padding:10px 16px 10px 0;
  border-bottom:2px solid var(--ls-accent-marker);
}
.ls-prose td{
  padding:12px 16px 12px 0;vertical-align:top;
  border-bottom:1px solid var(--ls-border-default);
}
.ls-prose th:last-child,.ls-prose td:last-child{padding-right:0}
.ls-prose tbody tr:last-child td{border-bottom:0}
.ls-prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--ls-surface-subtle);border:1px solid var(--ls-border-default);
  border-radius:3px;padding:1px 5px;color:var(--ls-text-primary);
}
/* Designed into the frame: the pre-publish warning stays until a lawyer
   has signed the copy off and the bracketed placeholders are filled. */
/* Node 144:922 rules the LEFT edge at 4px only — same treatment as the
   Positioning caption plate, not a full box. */
.ls-draftnote{
  background:var(--ls-surface-accent);
  border-left:4px solid var(--ls-accent-marker);
  padding:18px 22px;display:flex;flex-direction:column;gap:6px;
}
.ls-draftnote__label{font-size:11px;font-weight:600;line-height:1.3;letter-spacing:1.6px;text-transform:uppercase;color:var(--ls-text-brand)}
.ls-draftnote p{font-size:13.5px;line-height:1.6;color:var(--ls-text-secondary)}

@media (max-width:1200px){
  .ls-contact__inner,.ls-legal__inner{flex-direction:column;gap:48px}
  .ls-form,.ls-aside,.ls-toc{width:100%}
  .ls-toc{position:static;border-left:0;border-top:1px solid var(--ls-border-default);padding:20px 0 0}
}
@media (max-width:720px){
  .ls-form__row{flex-direction:column}
  .ls-next__step{flex-direction:column;gap:4px}
  .ls-next__num,.ls-next__text{width:100%}
}