/* ================================================================
   ASK ETHICARE — the component, shared by every page that renders it.
   Lifted out of index.html's inline <style> on 25 Sep 2026 so the homepage
   and /ask cannot drift apart. The markup these rules style is read by
   ask-ethicare.js; change the two together.
   ================================================================ */
.aske{background:#E6F1ED}
.aske .eyebrow{margin-bottom:14px}
.aske h2{font-family:'Work Sans',sans-serif;font-weight:300;font-size:clamp(30px,4.6vw,58px);letter-spacing:-.03em;line-height:1.02;color:#02615D;margin:0 0 8px}
.aske-q{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(19px,2.2vw,26px);color:#02615D;margin:0 0 24px}
.aske-head{margin-bottom:clamp(18px,2.2vw,28px)}
.aske .inr{max-width:740px}
.aske-box{display:flex;gap:10px;align-items:stretch;background:#fff;border:1px solid #C9DED3;border-radius:8px;padding:10px}
.aske-box:focus-within{border-color:#02615D;box-shadow:0 0 0 3px rgba(2,97,93,.1)}
.aske-box textarea{flex:1;min-width:0;border:none;outline:none;resize:none;background:none;font-family:'Manrope',sans-serif;font-size:17px;line-height:1.5;color:#333;padding:10px 8px 10px 12px;min-height:54px}
.aske-box textarea::placeholder{color:#8A9691}
.aske-go{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:54px;padding:14px 24px;border:none;border-radius:6px;background:#02615D;color:#fff;font-family:'Work Sans',sans-serif;font-weight:600;font-size:15.5px;cursor:pointer;transition:background .15s ease}
.aske-go:hover{background:#014E4B}
.aske-go:disabled{opacity:.55;cursor:wait}
.aske-go:focus-visible{outline:3px solid #02615D;outline-offset:2px;box-shadow:0 0 0 2px #FCFBF8}
/* Six whole questions rather than six topic words (3 Oct 2026). Underlined inline text
   worked for 'Registration'; it does not for a sentence, so they are pills that wrap. */
.aske-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.aske-chips button{background:#fff;border:1.5px solid #C9DED3;border-radius:999px;padding:9px 16px;font-family:'Work Sans',sans-serif;font-weight:600;font-size:14px;line-height:1.3;color:#02615D;cursor:pointer;text-align:left}
.aske-chips button:hover{border-color:#02615D;background:#E6F1ED}
.aske-chips button:focus-visible{outline:3px solid #02615D;outline-offset:2px}
.aske-priv{margin:16px 0 0;font-size:13px;line-height:1.5;color:#555;max-width:72ch}
.aske-thread{margin-top:clamp(22px,2.6vw,32px);display:grid;gap:18px}
.aske-turn{border-top:1px solid rgba(2,97,93,.22);padding-top:18px}
.aske-you{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(18px,2vw,22px);line-height:1.35;color:#02615D;margin:0 0 14px;max-width:60ch}
.aske-you span{display:block;font-family:'Work Sans',sans-serif;font-style:normal;font-weight:700;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:#2F5E49;margin-bottom:6px}
.aske-ans{background:#fff;border:1px solid #C9DED3;border-radius:8px;padding:clamp(20px,2.4vw,28px)}
.aske-ans p{font-size:16px;line-height:1.66;color:#333;margin:0 0 12px;max-width:66ch}
.aske-ans p:last-child{margin-bottom:0}
.aske-ans ul{margin:0 0 12px 18px}
.aske-ans li{font-size:16px;line-height:1.6;margin-bottom:6px;max-width:62ch}
.aske-ans strong{font-family:'Work Sans',sans-serif;font-weight:600;color:#02615D}
.aske-wait{color:#555;font-style:italic}
.aske-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:16px}
.aske-act{display:flex;flex-direction:column;gap:4px;background:#DCEAE0;border-radius:8px;padding:14px 16px;text-decoration:none}
.aske-act .at{font-family:'Work Sans',sans-serif;font-weight:600;font-size:15px;color:#02615D}
.aske-act .ad{font-size:13px;line-height:1.45;color:#2F5E49}
.aske-act .ag{font-family:'Work Sans',sans-serif;font-size:16px;color:#2F5E49;margin-top:2px}
.aske-handoff{margin-top:16px;padding:16px 18px;background:#F7F4EE;border-left:3px solid #A34438;border-radius:0 8px 8px 0}
.aske-handoff p{font-size:15px;margin:0 0 8px}
.aske-handoff a{font-family:'Work Sans',sans-serif;font-weight:600;color:#02615D;text-decoration:underline;text-underline-offset:3px}
.aske-fb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;padding-top:14px;border-top:1px solid #cfe0d6;font-size:13.5px;color:#555}
.aske-fb button{min-height:40px;padding:6px 14px;background:none;border:1px solid #C9DED3;border-radius:999px;font-family:'Work Sans',sans-serif;font-weight:600;font-size:13px;color:#02615D;cursor:pointer}
.aske-fb button:hover{border-color:#72A471}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:640px){.aske-box{flex-direction:column}.aske-go{align-self:stretch;justify-content:center}}

/* ---- /ask only: the component standing on its own page rather than as
   section 5 of the homepage. Nothing here affects the homepage. ---- */
.askpage{background:#E6F1ED;padding:clamp(52px,8vh,104px) 0 clamp(44px,6vh,84px)}
.askpage .wrapx{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.askpage h1{font-family:'Work Sans',sans-serif;font-weight:300;font-size:clamp(34px,5.4vw,66px);letter-spacing:-.03em;line-height:1.02;color:#02615D;margin:0 0 16px}
.askpage .keyline{margin:0 0 18px;padding:1px 0 2px 17px;border-left:3px solid #A6C84A;font-family:'Work Sans',sans-serif;font-weight:600;font-size:clamp(17.5px,1.85vw,21px);line-height:1.33;letter-spacing:-.008em;color:#02615D;max-width:34ch}
.askpage .sub{font-size:clamp(16.5px,1.4vw,18px);line-height:1.7;color:#42504B;max-width:60ch;margin:0 0 clamp(26px,3.4vw,38px);text-wrap:pretty}
.askpage .inr{max-width:820px}

/* the honest pair — what it does well, what it will not decide */
.askscope{background:#FCFBF8;padding:clamp(48px,7vh,92px) 0}
.askscope .wrapx{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.askscope h2{font-family:'Work Sans',sans-serif;font-weight:300;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.025em;line-height:1.08;color:#02615D;margin:0 0 clamp(24px,3vw,36px);max-width:22ch}
.askcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,3vw,40px);align-items:start}
.askcol h3{font-family:'Work Sans',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;color:#02615D;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #A6C84A}
.askcol.no h3{border-bottom-color:#D9A084}
.askcol ul{margin:0;padding:0;list-style:none}
.askcol li{position:relative;padding-left:20px;margin-bottom:11px;font-size:16px;line-height:1.6;color:#42504B;max-width:46ch}
.askcol li::before{content:"";position:absolute;left:2px;top:10px;width:7px;height:7px;border-radius:50%;background:#72A471}
.askcol.no li::before{background:#C58A7C}
.asknote{margin-top:clamp(28px,3.6vw,44px);padding:20px 22px;background:#F2F6F3;border-left:3px solid #02615D;border-radius:0 8px 8px 0;max-width:74ch}
.asknote p{margin:0;font-size:15.5px;line-height:1.65;color:#42504B}
.asknote p+p{margin-top:10px}
.asknote a{color:#02615D;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* browse instead */
.askbrowse{background:#fff;padding:clamp(44px,6vh,84px) 0}
.askbrowse .wrapx{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.askbrowse h2{font-family:'Work Sans',sans-serif;font-weight:300;font-size:clamp(24px,3vw,36px);letter-spacing:-.025em;color:#02615D;margin:0 0 8px}
.askbrowse .lede{font-size:16.5px;line-height:1.65;color:#5A6560;max-width:56ch;margin:0 0 clamp(22px,2.6vw,32px)}
.askgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.askgrid a{display:flex;flex-direction:column;gap:5px;padding:16px 18px;background:#F7FAF8;border:1px solid #DDE9E2;border-radius:8px;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.askgrid a:hover{border-color:#72A471;background:#F2F7F4}
.askgrid .t{font-family:'Work Sans',sans-serif;font-weight:600;font-size:15.5px;color:#02615D}
.askgrid .d{font-size:13.5px;line-height:1.45;color:#5A6560}
@media (max-width:760px){.askpage .keyline{padding-left:14px;max-width:none}.askcol li{max-width:none}}

/* How long the answer takes, said up front (2 Oct 2026). The call is ~6s and the full answer
   lands around twenty; without a number on screen that reads as broken rather than busy. */
.aske-time{font-family:"Work Sans",sans-serif;font-size:13.5px;color:#555;margin:10px 0 0}

/* The retry on a failed answer (3 Oct 2026). Same shape as the ask button, quieter, so a
   failure offers a way forward without shouting about itself. */
.aske-retry{font-family:'Work Sans',sans-serif;font-weight:600;font-size:15px;color:#02615D;background:#DCEAE0;border:0;border-radius:8px;padding:11px 18px;cursor:pointer}
.aske-retry:hover{background:#C9DED3}
.aske-retry:focus-visible{outline:3px solid #02615D;outline-offset:2px}

/* ============================================================================
   ASK ETHICARE — the page (3 Oct 2026)
   It read as a form on a pale page. The question box now sits in a dark teal
   band, which is the brand's one genuinely premium device (the guide heroes,
   the Move hero), and a worked example below shows what an answer is rather
   than describing it. Dark ground also fixes the contrast problem: lime is
   7.4:1 on dark teal and 1.9:1 on white, so it can finally do some work.
   ============================================================================ */
.askpage{background:#02615D;padding:0}
.ask-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,72px);align-items:center;
  padding:clamp(48px,7vw,92px) 0 clamp(44px,6vw,80px)}
.ask-hero-copy .eyebrow{color:#C6E084}
.ask-hero-copy .eyebrow::before{background:#A6C84A!important}
.ask-hero h1{color:#fff;font-family:'Work Sans',sans-serif;font-weight:300;font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.02em;margin:0 0 20px;max-width:14ch}
.ask-lede{color:#CFE3DC;font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;max-width:40ch;margin:0}

/* the instrument: a white card that looks like equipment, not stationery */
.ask-instrument{background:#FCFBF8;border-radius:16px;padding:clamp(20px,2.4vw,28px);box-shadow:0 30px 70px -40px rgba(0,0,0,.6)}
.ask-instrument #ctx-strip:not(:empty){margin-bottom:14px}
.ask-instrument .aske-box{border:1.5px solid #C9DED3;border-radius:12px;padding:12px;background:#fff}
.ask-instrument .aske-box textarea{font-size:17px}
.ask-instrument .aske-go{min-height:52px;border-radius:10px}
.ask-instrument .aske-chips{margin-top:14px}
.ask-instrument .aske-chips button{font-size:13.5px;padding:8px 14px;background:#EDF4F0;border-color:#D6E4DD}
.ask-instrument .aske-chips button:hover{background:#DCEAE0;border-color:#02615D}
.ask-fine{font-size:12.5px;line-height:1.55;color:#5B6B64;margin:16px 0 0}

@media(max-width:900px){
  .ask-hero{grid-template-columns:1fr;gap:28px;padding-top:clamp(34px,6vw,56px)}
  .ask-hero h1{max-width:none}
  .ask-lede{max-width:none}
}

/* the thread, once someone has actually asked */
.askpage .inr .aske-thread:not([hidden]){background:#FCFBF8;border-radius:16px;padding:clamp(20px,2.6vw,30px);margin-bottom:clamp(40px,6vw,72px)}

/* ---- the worked example ---- */
.ask-example{background:#FCFBF8;padding:clamp(52px,7vw,92px) 0}
.ask-example .wrapx{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.ask-ex-head{max-width:46ch;margin-bottom:clamp(26px,3vw,38px)}
.ask-ex-head h2{font-family:'Work Sans',sans-serif;font-weight:300;font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;color:#02615D;margin:0}
.ask-ex-card{background:#fff;border:1px solid #D6E1DA;border-radius:18px;padding:clamp(24px,3.2vw,40px);max-width:860px;box-shadow:0 24px 60px -46px rgba(1,49,47,.5)}
.ask-ex-q{font-family:'Work Sans',sans-serif;font-weight:600;font-size:clamp(17px,2vw,21px);line-height:1.4;color:#02615D;margin:0 0 22px;padding-bottom:20px;border-bottom:1px solid #E2ECE6}
.ask-ex-q span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5B6B64;margin-bottom:8px}
.ask-ex-a p{font-size:16px;line-height:1.65;color:#333;margin:0 0 14px;max-width:64ch}
.ask-ex-a strong{font-family:'Work Sans',sans-serif;font-weight:600;color:#02615D}
.ask-ex-src{font-size:13.5px!important;color:#5B6B64!important;padding-top:4px}
.ask-ex-src a{color:#02615D;text-decoration:underline;text-underline-offset:3px}
.ask-ex-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:22px}
.ask-ex-act{display:grid;gap:3px;background:#DCEAE0;border-radius:10px;padding:16px 18px;text-decoration:none;transition:background .15s ease}
.ask-ex-act:hover{background:#C9DED3}
.ask-ex-act .at{font-family:'Work Sans',sans-serif;font-weight:600;font-size:15px;color:#02615D}
.ask-ex-act .ad{font-size:13px;line-height:1.45;color:#2F5E49}
.ask-ex-act .ag{font-family:'Work Sans',sans-serif;font-size:17px;color:#2F5E49;margin-top:2px}
.ask-ex-note{font-size:13.5px;line-height:1.55;color:#5B6B64;margin:20px 0 0;max-width:62ch}

/* ---- more pop (4 Oct 2026) ----------------------------------------------
   The teal was a flat slab and the left column was 300px of nothing. Depth
   comes from layered gradients rather than an image (the page has no room
   for one beside the card), a lime glow lifts the instrument off the ground,
   and four real questions give the empty column something to say. */
.askpage{position:relative;overflow:hidden;background:#02615D}
.askpage::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 52% 76% at 72% 40%,rgba(166,200,74,.20) 0%,rgba(166,200,74,0) 62%),
  radial-gradient(ellipse 70% 90% at 8% 8%,rgba(1,49,47,.55) 0%,rgba(1,49,47,0) 60%),
  linear-gradient(170deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 34%,rgba(1,49,47,.42) 100%)}
.askpage .wrapx{position:relative;z-index:1}

.ask-hero h1{font-size:clamp(42px,6.2vw,76px);margin-bottom:22px}
.ask-hero h1 em{font-style:normal;color:#C6E084}
.ask-lede{color:#D8E8E1}

.ask-eg{list-style:none;margin:clamp(26px,3.4vw,40px) 0 0;padding:0;display:grid;gap:0;max-width:40ch;
  border-top:1px solid rgba(198,224,132,.26)}
.ask-eg li{position:relative;padding:13px 0 13px 26px;font-size:15px;line-height:1.5;color:#BCD6CC;
  border-bottom:1px solid rgba(198,224,132,.16)}
.ask-eg li::before{content:"";position:absolute;left:0;top:19px;width:11px;height:2px;border-radius:2px;background:#A6C84A}

/* the instrument, lifted */
.ask-instrument{position:relative;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 42px 90px -46px rgba(0,0,0,.75), 0 0 0 1px rgba(166,200,74,.14), 0 10px 30px -18px rgba(166,200,74,.3)}
.ask-instrument .aske-go{background:#02615D;box-shadow:0 8px 20px -10px rgba(2,97,93,.9);transition:background .15s ease,transform .15s ease}
.ask-instrument .aske-go:hover{background:#01413E;transform:translateY(-1px)}
.ask-instrument .aske-box{transition:border-color .15s ease,box-shadow .15s ease}
.ask-instrument .aske-box:focus-within{border-color:#02615D;box-shadow:0 0 0 4px rgba(166,200,74,.3)}
.ask-instrument .aske-chips button{transition:background .15s ease,border-color .15s ease,transform .12s ease}
.ask-instrument .aske-chips button:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.ask-instrument .aske-go:hover,.ask-instrument .aske-chips button:hover{transform:none}}
@media(max-width:900px){.ask-eg{display:none}}

/* ---- high end (4 Oct 2026) ----------------------------------------------
   Three things were holding it back: the headline was all sans, the card led
   with a grey instruction rather than the thing you came to use, and the
   chips broke into a ragged three rows. Serif/sans contrast is the cheapest
   real lift available and Playfair is already loaded on this page. */
.ask-hero h1{font-weight:200;letter-spacing:-.035em;line-height:1}
.ask-hero h1 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;color:#C6E084;letter-spacing:-.01em}

/* the instrument: a nameplate, then the box, then the refinements */
.ask-instrument{border-radius:14px;padding:clamp(22px,2.6vw,32px)}
.ask-nameplate{font-family:'Work Sans',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#5B6B64;margin:0 0 12px}
.ask-instrument .aske-box{border:1px solid #D6E4DD;border-radius:10px;padding:14px}
.ask-instrument .aske-box textarea{font-size:17.5px;line-height:1.5}

/* chips as a composed block, not a ragged wrap */
.ask-instrument .aske-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ask-instrument .aske-chips button{width:100%;border-radius:9px;padding:11px 14px;font-size:13.5px;
  background:#F2F7F4;border:1px solid #E0EAE4;color:#02615D}
.ask-instrument .aske-chips button:hover{background:#E4EFE8;border-color:#A6C84A}
@media(max-width:560px){.ask-instrument .aske-chips{grid-template-columns:1fr}}

/* the quiet footer */
.ask-foot{margin-top:18px;padding-top:16px;border-top:1px solid #E6EEEA}
.ask-foot .ask-fine{margin:0;font-size:12px;line-height:1.6;color:#6C7B74}

/* ---- your page (5 Oct 2026) ------------------------------------------------------------
   One card under the question box. Before there are answers it is the invitation to /you;
   once there are, it says who the answers are for and links to their page. Sophie found the
   earlier version — the strip opening in place and the page quietly re-rendering — confusing:
   "you expect the site to do something". So now the something is a page of its own. */
.ask-you{display:grid;grid-template-columns:1fr auto;gap:4px 22px;align-items:center;background:#F3F7F4;border:1px solid #DCE7E0;border-radius:14px;padding:14px 18px;text-decoration:none;margin-bottom:14px;transition:border-color .15s,box-shadow .15s}
.ask-you:hover{border-color:#02615D;box-shadow:0 8px 20px rgba(1,49,47,.08)}
.ask-you .k{grid-column:1;font-family:'Work Sans',sans-serif;font-weight:600;font-size:15px;line-height:1.3;color:#02615D}
.ask-you .d{grid-column:1;font-size:13.5px;line-height:1.5;color:#5B6B64}
.ask-you .d strong{color:#02615D;font-weight:600}
.ask-you .b{grid-column:2;grid-row:1/3;font-family:'Work Sans',sans-serif;font-weight:600;font-size:14px;color:#01312F;background:#A6C84A;border-radius:999px;padding:9px 16px;white-space:nowrap}
.ask-you:hover .b{background:#C6E084}
.ask-you.is-known .b{background:#fff;border:1px solid #C9DED3;color:#02615D}
.ask-you.is-known:hover .b{background:#F7FBF4}
@media(max-width:560px){.ask-you{grid-template-columns:1fr}.ask-you .b{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}


/* ---- showstopper pass (6 Oct 2026, Sophie: "this page needs to be a real showstopper and
   should have the ask ethicare logo") ---------------------------------------------------------- */
.ask-logo{display:block;height:clamp(44px,5vw,64px);width:auto;margin:0 0 clamp(22px,3vw,34px)}
.ask-hero h1{max-width:12ch}
.ask-nameplate{display:flex;align-items:center;gap:10px}
.ask-nameplate img{height:22px;width:auto}
.ask-instrument .aske-go{background:#A6C84A;color:#01312F;font-size:16px;box-shadow:0 10px 24px -12px rgba(166,200,74,.9)}
.ask-instrument .aske-go:hover{background:#C6E084;transform:translateY(-1px)}
.ask-instrument .aske-box:focus-within{border-color:#02615D;box-shadow:0 0 0 4px rgba(166,200,74,.35)}
/* the typewriter placeholder: a caret the browser cannot draw in a placeholder, so a span sits over it */
.aske-box{position:relative}
.aske-type{position:absolute;left:27px;top:25px;right:170px;font-family:'Manrope',sans-serif;font-size:17.5px;line-height:1.5;color:#8A9691;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aske-type::after{content:"";display:inline-block;width:2px;height:1.05em;background:#A6C84A;vertical-align:-2px;margin-left:2px;animation:aske-blink 1s steps(1) infinite}
@keyframes aske-blink{50%{opacity:0}}
.aske-box.is-typing textarea::placeholder{color:transparent}
@media(prefers-reduced-motion:reduce){.aske-type{display:none}.aske-box.is-typing textarea::placeholder{color:#8A9691}}

/* ---- the film ------------------------------------------------------------------------------- */
.ask-watch{background:#01312F;color:#fff;padding:clamp(56px,7vw,96px) 0}
.ask-watch .wrapx{max-width:1180px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}
.ask-watch-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.ask-watch-copy .eyebrow{color:#C6E084}
.ask-watch-copy .eyebrow::before{background:#A6C84A!important}
.ask-watch-copy h2{font-family:'Work Sans',sans-serif;font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.12;letter-spacing:-.02em;color:#fff;margin:8px 0 14px}
.ask-watch-copy p{font-size:17px;line-height:1.6;color:#CFE3DC;margin:0 0 12px}
.ask-watch-note{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:#C6E084!important;font-size:18px!important}
.ask-watch-film{margin:0;border-radius:18px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.1);background:#02615D}
.ask-watch-film video{display:block;width:100%;height:auto}
@media(max-width:900px){.ask-watch-grid{grid-template-columns:1fr}.aske-type{right:24px}}
@media(max-width:560px){.aske-type{display:none}.aske-box.is-typing textarea::placeholder{color:#8A9691}}

/* the question gets the whole width; the button sits beneath it, right-aligned */
.ask-instrument .aske-box{flex-direction:column;align-items:stretch;gap:8px}
.ask-instrument .aske-box textarea{min-height:76px;padding:8px 6px 4px}
.ask-instrument .aske-go{align-self:flex-end}
.aske-type{left:21px;top:22px;right:20px;white-space:normal;overflow:visible;text-overflow:clip}

/* Ask page (9 Oct 2026): "Make this your page" sits under the lede on the dark hero, not inside the question card */
.ask-hero-copy .ask-you{margin:clamp(30px,3.6vw,44px) 0 0;max-width:460px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.ask-hero-copy .ask-you:hover{border-color:#C6E084;box-shadow:none;background:rgba(255,255,255,.12)}
.ask-hero-copy .ask-you .k{color:#fff}
.ask-hero-copy .ask-you .d{color:#D5E6DF}
.ask-hero-copy .ask-you .d strong{color:#fff}
.askpage .ask-foot{border-top:0;padding-top:4px}
.ask-hero-copy .ask-free{margin:14px 0 0;font-family:'Work Sans',sans-serif;font-weight:600;font-size:15px;color:#C6E084}
.askpage .ask-hero-copy h1{font-size:clamp(38px,4.6vw,62px)}

/* The question box under the thread once someone has asked (12 Oct 2026) — see ask-ethicare.js */
.aske-follow{margin-top:clamp(22px,2.6vw,30px)}
.aske-follow .aske-box{flex-direction:row}
.aske-follow .aske-chips{margin-top:12px}
.askpage .inr .aske-thread:not([hidden]){margin-bottom:0}
.askpage .inr .aske-follow{background:#FCFBF8;border-radius:16px;padding:clamp(18px,2.4vw,26px);margin:16px 0 clamp(40px,6vw,72px)}
@media(max-width:640px){.aske-follow .aske-box{flex-direction:column}.aske-follow .aske-go{align-self:stretch;justify-content:center}}
.ask-hero.is-asked,.you-ask-grid.is-asked{grid-template-columns:1fr}
.ask-instrument[hidden]{display:none}
.askpage .inr .aske-follow .ask-fine{margin-top:14px}
.you-ask .inr .aske-follow{margin-bottom:clamp(30px,5vw,56px)}