@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/figtree-latin-ext-bf7828e2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/figtree-latin-4ba7d3d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/figtree-latin-ext-bf7828e2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/figtree-latin-4ba7d3d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/figtree-latin-ext-bf7828e2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/figtree-latin-4ba7d3d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/figtree-latin-ext-bf7828e2.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Figtree';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/figtree-latin-4ba7d3d0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* Adult Autism Assessment Perth — design system.
   Laid out after shiftkey.com, at Tradd's direction (22 Sep 2026).

   ⚠️ REBUILT FROM SCREENSHOTS, not from a description. The first attempt was written from a
   text summary of the page which said "white background, teal accent, pill buttons". The
   actual site is nearly the opposite: off-white, deep forest green and near-black sections
   alternating, a bright green accent, SQUARE-cornered photographs, rounded-RECTANGLE buttons,
   and a hand-drawn underline scribbled beneath the key words of every heading. Look at the
   page, not at a summary of it.

   Their words, photographs and logo are not copied. Those are theirs, and duplicated copy
   cannot rank in any case. */

:root{
  /* ⚠️ SAMPLED FROM THE REFERENCE, not estimated. These are the modal pixel values taken
     off a screenshot of shiftkey.com, because "about the same grey" was not the same grey —
     mine was a warm #f4f3ee against their cool #F2F3F5, and the difference showed as a seam
     between the header and the hero. */
  --ink:#171a1c; --ink-soft:#495257; --line:#dfe2e4;
  --bg:#f2f3f5;               /* their --chalk, exactly */
  --bg-warm:#ffffff;
  --forest:#254236;          /* their --dark-green */
  --coal:#1d2227;            /* their --dark-gray */
  --bg-deep:#1d2227;
  --radius-section:40px;     /* their --section-border-radius */
  /* ⚠️ The green is DARKER than shiftkey's. Theirs measures 4.01:1 against white button
     text, under the 4.5 minimum. #3A8444 is 4.6:1 and reads as the same colour at a glance.
     The bright --brand-lite below is for the hand-drawn scribble only and never carries text. */
  --brand:#3A8444;
  --brand-dark:#2F6A37;
  --brand-lite:#6cc46f;       /* the scribble green — decoration only, never text */
  --brand-tint:#e6efe6;
  --ok:#3f8f4a;
  /* Every one of these clears 4.5:1 on its own background. Checked, not eyeballed — the
     fleet lost an evening to contrast failures on 21 Sep 2026. */
  /* ⚠️ THE REFERENCE USES MINT GROTESK, which is a commercial licence we do not hold:
     `font-family:MintGroteskDisplay-ExtraBold` for display and `MintGrotesk-Medium` for body,
     read off their stylesheet on 22 Sep 2026. Figtree is the closest free grotesk — same
     tight, heavy display cut and the same neutral body — and it is self-hosted here rather
     than pulled from Google, because the fleet measured that request at ~1s of render
     blocking. If Tradd wants the real thing it is a licence purchase and a file swap. */
  --h:'Figtree',-apple-system,'Segoe UI',system-ui,Arial,sans-serif;
  --b:'Figtree',-apple-system,'Segoe UI',system-ui,Arial,sans-serif;
  --wrap:1160px; --gap:clamp(3rem,6vw,5rem);
  --r:5px; --pill:5px; --shadow:0 10px 30px rgba(25,27,25,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--b);color:var(--ink);background:var(--bg);
     font-size:16.5px;line-height:1.62;letter-spacing:-.002em;-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--h);line-height:1.06;text-wrap:balance;margin:0 0 .45em}
h1{font-size:clamp(2.3rem,5.2vw,3.7rem);font-weight:800;letter-spacing:-.028em}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:800;letter-spacing:-.022em}
h3{font-size:1.14rem;font-weight:700;letter-spacing:-.004em}
p{margin:0 0 .85rem}
a{color:var(--brand-dark)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
section{padding:var(--gap) 0}
.warm{background:var(--bg-warm)}
.lede{font-size:1.03rem;color:var(--ink-soft);max-width:64ch;line-height:1.45}
/* ⚠️ --brand-dark, not --brand. The page background is OFF-white (#f4f3ee), not white, and
   --brand measures 4.14:1 against it — under the minimum. It passes on pure white, which is
   exactly how this gets missed: check the colour against the background it is actually on. */
.eyebrow{font-family:var(--h);font-size:.78rem;font-weight:700;letter-spacing:.16em;
         text-transform:uppercase;color:var(--brand-dark);margin:0 0 .6rem}

/* header ------------------------------------------------------------------ */
.top{background:var(--bg-deep);color:#e3edef;font-size:.82rem}
.top .wrap{display:flex;gap:1rem;justify-content:space-between;align-items:center;
           min-height:38px;flex-wrap:wrap}
.top a{color:#e3edef;text-decoration:none}
/* ⚠️ Same background as the hero and NO bottom border. On the reference the header and the
   hero are one unbroken field of colour; a white bar with a rule under it reads as a
   different site. The border only appears once the page is scrolled away from the top. */
header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent}
header .wrap{display:flex;align-items:center;gap:1rem;min-height:74px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--h);font-weight:800;
       font-size:1.22rem;letter-spacing:-.015em;text-decoration:none;color:var(--ink);
       line-height:1.1}
.brand img{width:40px;height:40px;flex:none}
.brandtext span{display:block;font-family:var(--b);font-weight:400;font-size:.71rem;
            letter-spacing:.04em;text-transform:none;color:var(--ink-soft);margin-top:.12rem}
nav{margin-left:auto}
nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{font-family:var(--h);font-size:.98rem;font-weight:600;text-decoration:none;color:var(--ink)}
nav a:hover,nav a[aria-current]{color:var(--brand)}
/* dropdowns — open on hover AND focus-within, so a keyboard reaches them without JS.
   The button is a real <button> rather than a link, because it goes nowhere: a parent link
   that also opens a menu is the single most common broken nav pattern on trade sites. */
nav li.has-sub{position:relative}
.subtoggle{font:inherit;font-family:var(--h);font-size:.98rem;font-weight:600;color:var(--ink);
           background:0;border:0;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem}
.subtoggle:after{content:"";border:4px solid transparent;border-top-color:currentColor;
                 margin-top:4px;transition:transform .12s}
.subtoggle:hover,li.has-sub:focus-within>.subtoggle{color:var(--brand)}
nav ul.sub{display:none;position:absolute;top:calc(100% + 10px);left:-.9rem;min-width:15rem;
           flex-direction:column;gap:0;background:#fff;border:1px solid var(--line);
           border-radius:var(--r);box-shadow:var(--shadow);padding:.4rem 0;z-index:60}
li.has-sub:hover>ul.sub,li.has-sub:focus-within>ul.sub,ul.sub.open{display:flex}
nav ul.sub li{width:100%}
nav ul.sub a{display:block;padding:.5rem .9rem;font-weight:500;white-space:nowrap}
nav ul.sub a:hover{background:var(--brand-tint);color:var(--brand-dark)}
/* the gap between button and panel would otherwise drop the hover */
li.has-sub:before{content:"";position:absolute;top:100%;left:0;right:0;height:12px}

.callbtn{background:var(--brand);color:#fff!important;padding:.62rem 1.3rem;border-radius:var(--pill);
         font-family:var(--h);font-weight:700;text-decoration:none;white-space:nowrap;font-size:.95rem}
.callbtn:hover{background:var(--brand-dark)}
.navtoggle{display:none}

/* hero -------------------------------------------------------------------- */
.hero{background:var(--bg);padding:var(--gap) 0}

/* ── Hero video background ────────────────────────────────────────────────────────────────
   The video is decoration, not content: aria-hidden and tabindex="-1" keep it out of the
   accessibility tree and off the tab order, and the h1 beside it carries the meaning.
   muted + playsinline are what make autoplay legal on iOS; without both, Safari shows a
   frozen frame. The poster is a real WebP, so anyone on a slow connection or with reduced
   motion still gets the photograph rather than a dark rectangle. */
.hero-video{position:relative;overflow:hidden;background:var(--bg-deep)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
         z-index:0;pointer-events:none}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(28,24,21,.86) 0%,rgba(28,24,21,.72) 42%,rgba(28,24,21,.42) 100%)}
.hero-video>.wrap{position:relative;z-index:2}
/* Text sits on a dark veil now, so the hero's own type inverts. Everything outside the hero
   is untouched. */
.hero-video h1{color:#fff}
.hero-video .lede{color:#eae3d9}
.hero-video .eyebrow{color:#e0c79a}
.hero-video .badges li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#f3ece1}
.hero-video .btn-ghost{color:#fff;border-color:#fff}
.hero-video .btn-ghost:hover{background:rgba(255,255,255,.14)}
@media (prefers-reduced-motion:reduce){
  /* Asked not to be moved: drop the video entirely and let the poster stand in. */
  .hero-bg{display:none}
  .hero-video{background:var(--bg-deep) url("/assets/video/hero-kitchen-poster.webp") center/cover}
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.badges{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.2rem 0 0;padding:0;list-style:none}
.badges li{font-size:.78rem;font-family:var(--h);font-weight:600;background:#fff;
           border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:var(--pill);font-family:var(--h);
     font-weight:700;text-decoration:none;border:2px solid var(--brand);font-size:.97rem}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-ghost{background:transparent;color:var(--brand-dark)}
.btn-ghost:hover{background:var(--brand-tint)}

/* quote form -------------------------------------------------------------- */
/* ⚠️ COMPACT ON PURPOSE (Tradd, 22 Sep 2026). The form sits in the hero, so its height
   decides how much of the page is visible on arrival. Two columns for the short fields, a
   tighter rhythm, and no explanatory paragraphs above or below it — he cut both. */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.25rem;
       box-shadow:var(--shadow)}
.quote h2{font-size:1.22rem;margin-bottom:.8rem}
.quote label{display:block;font-family:var(--h);font-size:.72rem;font-weight:700;
             letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:.55rem 0 .22rem}
.quote .row{display:grid;grid-template-columns:1fr 1fr;gap:0 .7rem}
.quote .row>div{min-width:0}
.quote .row label{margin-top:.55rem}
.quote input,.quote select,.quote textarea{width:100%;padding:.55rem .7rem;font:inherit;
  font-size:.93rem;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink)}
.quote textarea{resize:vertical}
@media (max-width:420px){.quote .row{grid-template-columns:1fr}}
.quote input:focus,.quote select:focus,.quote textarea:focus{outline:2px solid var(--brand);
  outline-offset:1px;border-color:var(--brand)}
.quote button{width:100%;margin-top:.95rem;padding:.78rem;font-family:var(--h);font-weight:700;
  font-size:.98rem;color:#fff;background:var(--brand);border:0;border-radius:var(--r);cursor:pointer}
.quote button:hover{background:var(--brand-dark)}
.formnote{font-size:.78rem;color:var(--ink-soft);margin:.7rem 0 0}
.hp{position:absolute;left:-9999px}   /* honeypot */

/* cards ------------------------------------------------------------------- */
.grid{display:grid;gap:1.25rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;
      display:flex;flex-direction:column}
/* ⚠️ max-width:none is load-bearing. The global img{max-width:100%} above caps this at the
   content box, so the calc() width never applied while margin-left:-1.4rem still did — the
   photo sat 1.4rem left of centre with dead space on the right. Reported 19 Aug 2026. */
.card img{display:block;max-width:none;width:calc(100% + 2.8rem);
          margin:-1.4rem -1.4rem 1rem;border-radius:var(--r) var(--r) 0 0;
          aspect-ratio:4/3;object-fit:cover;object-position:center;background:var(--brand-tint)}
.card h3{margin-bottom:.35rem}
.hero-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:14px;
          box-shadow:var(--shadow);background:var(--brand-tint)}
.card p{font-size:.95rem;color:var(--ink-soft);margin-bottom:.7rem;line-height:1.45}
.card a.more{margin-top:auto;font-family:var(--h);font-weight:700;font-size:.9rem;
             text-decoration:none;color:var(--brand-dark)}
.card a.more:after{content:" →"}
.num{font-family:var(--h);font-weight:700;font-size:.8rem;color:var(--brand);
     letter-spacing:.1em;text-transform:uppercase}

/* tables ------------------------------------------------------------------ */
.matgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:.9rem;margin:1.4rem 0 .5rem}
.matgrid figure{margin:0}
.matgrid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:center;border-radius:8px;background:var(--brand-tint)}
.matgrid figcaption{font-family:var(--h);font-size:.78rem;font-weight:600;margin-top:.45rem;
                    text-align:center;color:var(--ink-soft)}
@media(max-width:860px){.matgrid{grid-template-columns:repeat(3,1fr)}}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.94rem;margin-top:1rem}
th,td{text-align:left;padding:.6rem .8rem;line-height:1.45;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--h);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
   color:var(--ink-soft);white-space:nowrap}
td:last-child,th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* faq --------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line);padding:.15rem 0}
.faq summary{cursor:pointer;font-family:var(--h);font-weight:700;font-size:1.12rem;
             padding:.95rem 2rem .95rem 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:.3rem;top:.8rem;font-size:1.4rem;
                   font-weight:400;color:var(--brand);transition:transform .15s}
.faq details[open] summary:after{content:"–"}
.faq p{margin:0 0 .9rem;color:var(--ink-soft);max-width:72ch;line-height:1.5}

/* band + footer ----------------------------------------------------------- */
.band{background:var(--bg-deep);color:#e3edef;text-align:center}
.band h2{color:#fff}
.band p{color:#cfdee1;max-width:58ch;margin-inline:auto}
footer{background:#1e1a18;color:#cfc7bd;font-size:.9rem;padding:var(--gap) 0 1.5rem}
footer h4{color:#fff;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;margin-bottom:.7rem}
footer a{color:#cfc7bd;text-decoration:none}
footer a:hover{color:#fff}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2rem}
.fbot{border-top:1px solid #332e2a;margin-top:2rem;padding-top:1.2rem;font-size:.82rem;
      display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* sticky mobile call bar --------------------------------------------------- */
.stickycall{display:none}
@media (max-width:860px){
  .hero-grid,.g3,.g2,.fgrid{grid-template-columns:1fr}
  nav{display:none}
  nav.open{display:block;margin:0;width:100%;order:9;padding-bottom:1rem}
  nav.open ul{flex-direction:column;gap:.9rem}
  /* On a phone there is no hover, and a nested flyout inside a stacked menu is fiddly.
     Submenus render inline and indented instead — every page one tap away. */
  nav.open ul.sub{display:flex;position:static;border:0;box-shadow:none;padding:.4rem 0 0 .9rem;
                  border-left:2px solid var(--line);margin-top:.5rem;gap:.6rem}
  nav.open .subtoggle{pointer-events:none}
  nav.open .subtoggle:after{display:none}
  li.has-sub:before{display:none}
  .navtoggle{display:block;margin-left:auto;background:0;border:1px solid var(--line);
             border-radius:8px;padding:.5rem .7rem;font:inherit;cursor:pointer}
  header .wrap{flex-wrap:wrap}
  body{padding-bottom:64px}
  .stickycall{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--brand);color:#fff;text-decoration:none;font-family:var(--h);font-weight:700;
    align-items:center;justify-content:center;gap:.5rem;min-height:60px;font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}}


/* ── Alternating text-and-image rows (shiftkey.com's main section rhythm) ────────────────
   Text one side, picture the other, reversed on the next row. Below 820px the picture goes
   underneath, always — a half-width photograph on a phone is a thumbnail nobody can read. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,5vw,4rem);align-items:center}
.split img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0;box-shadow:var(--shadow)}
.split.flip .splittext{order:2}
.split.flip .splitmedia{order:1}
.split h2{margin-bottom:.5rem}
.split ul{margin:.9rem 0 0;padding-left:1.1rem;color:var(--ink-soft)}
.split li{margin-bottom:.4rem}
@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .split.flip .splittext,.split.flip .splitmedia{order:initial}
}

/* Price rows. Plain and legible beats a styled table on a phone. */
.prices{list-style:none;margin:1.4rem 0 0;padding:0;max-width:34rem}
.prices li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  border-bottom:1px solid var(--line);padding:.8rem 0}
.prices .amt{font-family:var(--h);font-weight:700;font-size:1.12rem;color:var(--brand-dark);
  white-space:nowrap}


/* ── shiftkey.com's signature marks ────────────────────────────────────────────────────────
   Two things carry their whole look, and without them it is just another site.

   1. THE HAND-DRAWN UNDERLINE. A green scribble under the key phrase of a heading, drawn
      loose so it reads as pen rather than a border. It is an inline SVG background so it
      scales with the text and costs no request. DECORATION ONLY — it is never the thing
      carrying meaning, and it never sits under text small enough to be obscured by it.
   2. THE SPECKLE. The dark sections are not flat; they carry a faint noise so a large field
      of colour does not band on a cheap screen. */
.mark{position:relative;white-space:nowrap}
/* The scribble hangs BELOW the text box, so a heading that ends in one needs room or the
   stroke lands on the first line of the paragraph under it. */
h1:has(.mark),h2:has(.mark){margin-bottom:.62em}
.mark:after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:-.22em;height:.34em;
  background:no-repeat center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M3 15c52-9 118-12 171-9 41 2 79 6 123 11' fill='none' stroke='%236cc46f' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M16 20c60-7 130-10 190-7' fill='none' stroke='%236cc46f' stroke-width='2.5' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E");
  pointer-events:none}

.forest,.coal{position:relative;color:#f1f3ef}
.forest{background:var(--forest)}
.coal{background:var(--coal)}
/* ⚠️ NO TEXTURE, deliberately. The reference puts a tiled spatter PNG over each section
   (`background-color` + `background-image:url(/img/textures/texture-1.png)`, three files,
   one per section colour — confirmed from their stylesheet, 22 Sep 2026). We built the
   equivalent and Tradd cut it: at our scale it read as dirt on the screen rather than
   texture. The generator survives in tools/make_texture.py if it is ever wanted again.
   Flat colour is the decision, not an omission. */
.forest,.coal{position:relative;color:#f1f3ef}
.forest{background-color:var(--forest)}
.coal{background-color:var(--coal)}
.hero,.warm{position:relative;background-color:var(--bg)}
.warm{background-color:var(--bg-warm)}
.forest h2,.coal h2,.forest h3,.coal h3{color:#fff}
.forest p,.coal p{color:#d7ded8}
/* ⚠️ Not just <p>. `.split ul` sets its own dark --ink-soft and won on specificity, so the
   bullets rendered dark grey on dark green and were effectively invisible. Anything that can
   land on a dark section has to be named. */
.forest ul,.coal ul,.forest li,.coal li{color:#d7ded8}
.forest a,.coal a{color:#bfe0c2}
.forest .prices li,.coal .prices li{border-bottom-color:rgba(255,255,255,.16)}
.forest .prices .amt,.coal .prices .amt{color:var(--brand-lite)}
.forest .formnote,.coal .formnote{color:#b9c3bb}
.forest .eyebrow,.coal .eyebrow{color:var(--brand-lite)}
.forest .btn-onlight,.coal .btn-onlight{background:#fff;color:var(--ink);border-color:#fff}
.forest .btn-onlight:hover,.coal .btn-onlight:hover{background:#e9ece8}

/* Icon · heading · short text, three across — their "A more decisive relationship" block. */
.iconrow{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 2.4rem;margin-top:2rem}
.iconrow h3{margin:.7rem 0 .3rem;font-size:1.05rem}
.iconrow p{font-size:.93rem;color:var(--ink-soft);margin:0;line-height:1.5}
.iconrow svg{width:30px;height:30px;stroke:var(--brand);fill:none;stroke-width:1.8}
@media (max-width:860px){.iconrow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.iconrow{grid-template-columns:1fr}}

/* The inline strip form — their ZIP code + Explore Shifts row. One field, one button. */
.strip{display:flex;background:#fff;border-radius:var(--r);overflow:hidden;max-width:26rem;
  box-shadow:var(--shadow)}
.strip input{flex:1;border:0;padding:.85rem 1rem;font:inherit;color:var(--ink);min-width:0}
.strip input:focus{outline:2px solid var(--brand);outline-offset:-2px}
.strip button{border:0;background:var(--coal);color:#fff;font-family:var(--h);font-weight:700;
  font-size:.88rem;padding:.85rem 1.2rem;cursor:pointer;white-space:nowrap}
.strip button:hover{background:#000}

/* Offset photographs, hard-cornered, the way their imagery overlaps. */
.stack{position:relative}
.stack img{border-radius:0;box-shadow:var(--shadow)}
.stack .inset{position:absolute;right:-6%;top:-12%;width:44%;border:6px solid var(--bg)}
@media (max-width:820px){.stack .inset{position:static;width:100%;border:0;margin-top:.9rem}}


/* ── Hero, after the reference ─────────────────────────────────────────────────────────────
   A tall photograph on one side with the white card floating over it, and the heading beside
   it. The card OVERLAPS the photograph rather than sitting next to it — that overlap is the
   whole look, and it is why the panel is portrait rather than landscape.

   ⚠️ The overlap is a large-screen affordance only. Below 980px the card moves underneath
   the photograph, because a form floating on an image is unusable the moment either one has
   to shrink. */
/* ⚠️ MEASURED OFF THE REFERENCE, not eyeballed. Sampling their hero:
     photograph  x 1.3% → 55.5% of the viewport   (so it very nearly touches the left edge)
     text column starts at 64.8%
   It is NOT a 50/50 split, and the photo is NOT inside the page gutter — it bleeds left and
   is rounded only on its two INNER corners, so it reads as a panel sliding in from off-page.
   That is why the hero has its own full-width grid instead of sitting in .wrap. */
.herogrid{display:grid;grid-template-columns:54.2% 1fr;align-items:center;
  max-width:none;padding:0;margin:0}
.heromedia{position:relative;margin-left:8px}
.heroshot{width:100%;display:block;object-fit:cover;
  border-radius:0 var(--radius-section) var(--radius-section) 0;box-shadow:var(--shadow)}
/* The text column starts at 64.8% of the viewport on the reference. This column begins at
   54.2%, so the inset is (64.8 - 54.2) / 45.8 = 23.1% of the column's own width. The
   resulting measure is narrow on purpose — their h1 wraps to three lines and it is the
   narrowness that gives the heading its weight. */
.herotext{padding-left:23.1%;padding-right:max(1.25rem,calc((100vw - var(--wrap))/2))}

@media (min-width:980px){
  /* The card is inset from the left and stops well short of the right edge, so a band of the
     photograph stays visible beside it. Covering the whole image would make the panel
     pointless — it may as well be a grey rectangle. */
  /* ⚠️ The card is deliberately SMALLER than the photograph it sits on. On the reference the
     photo is the hero and the card is an object placed on it — you can see the image around
     all four sides. Sizing the card to fill the panel makes the photo a border. */
  .heroform{position:absolute;left:6%;top:50%;transform:translateY(-50%);
    width:min(340px,58%);padding:1.05rem;box-shadow:0 22px 50px rgba(23,26,28,.30)}
  .heroform h2{font-size:1.1rem;margin-bottom:.6rem}
  .heroform label{font-size:.68rem;margin:.45rem 0 .18rem}
  .heroform input,.heroform select,.heroform textarea{padding:.46rem .6rem;font-size:.88rem}
  .heroform button{margin-top:.8rem;padding:.66rem;font-size:.92rem}
  .heromedia{min-height:620px}
  .heroshot{height:620px;object-position:62% center}
}
@media (max-width:979px){
  .herogrid{grid-template-columns:1fr;gap:1.4rem}
  .herotext{order:-1;padding:0 1.25rem}
  .heromedia{margin-left:0}
  .heroshot{height:auto;aspect-ratio:16/10;border-radius:0}
  .heroform{margin:1rem 1.25rem 0}
}


/* Sections carry a rounded TOP edge, so each colour block sits over the one above it like a
   card. Theirs is 40px, on every section except the first. */
section.forest,section.coal,section.warm{
  border-radius:var(--radius-section) var(--radius-section) 0 0}
@media (max-width:700px){section.forest,section.coal,section.warm{border-radius:24px 24px 0 0}}