/* ==========================================================================
   TRADE PAGES — the shared layout for /hvac and /roofing.

   There were three. /contractors was the third and it is deleted: the shop
   takes HVAC and roofing only, and that page existed to sell every other
   trade. Both survivors are the same page with different words, so the
   composition lives in one file rather than in two <style> blocks that drift
   apart. Load it AFTER system.css and faq.css:

     <link rel="stylesheet" href="/css/system.css">
     <link rel="stylesheet" href="/css/faq.css">
     <link rel="stylesheet" href="/css/trade.css">

   faq.css carries the whole question accordion, which these pages share with
   the homepage rather than redefining.

   Tokens, type, buttons, .sec, .slab, .cta, the footer and the nav component
   all come from system.css. Nothing here redefines them, and there are no
   hardcoded colour values in this file.

   PAGE ORDER: hero, services, leaks, own your zip code, fit, questions, CTA.
   Both pages now run that order with nothing inserted; /contractors used to
   put a trade grid under the hero, which is why the grounds below differed
   between the pages. The slab classes alternate down the page and are written
   by the generator, so inserting a section flips every ground below it.
   ========================================================================== */

/* clip, not hidden — overflow:hidden on <body> makes it a scroll container
   and silently kills position:sticky on the header. */
body{overflow-x:clip}

/* ---- THE HERO ------------------------------------------------------------
   The cream photographic hero is `.photo-hero` and it lives in system.css,
   because /blog, /work and /resources open the same way now. It moved there
   the day the second page wanted it: six copies of a hero is six heroes that
   drift, which is the same argument that moved .topo. Nothing about it
   changed in the move, and the class it is worn with, `.hero-card`, was
   already shared. Edit it there.

   What stays here is only what is specific to these three pages.

   IMPORTANT: `.trade-hero` still rides on the same element. It is the anchor
   for the ONE GROUND selector below, which reads `.trade-hero ~ .sec`. Taking
   it off the markup silently returns every band on the page to the slab
   alternation.                                                               */

/* ---- SECTION HEADS ------------------------------------------------------- */
.trade-head{max-width:64ch}
.trade-head h2{margin-top:.24em}
.trade-head .lede{margin-top:18px}
/* Wider measure, used where the h2 is long enough to take a third line at 64ch.
   A 3-line headline is not a style problem on its own, but on the EDGE section
   it was 45px of the 79px that put the section past the fold. */
.trade-head-w{max-width:80ch}

/* ---- THE EDGE ------------------------------------------------------------
   The first section after the hero, and now the only one before the leaks.

   There used to be a SERVICES block above this, three panels reading "get
   found / get answered / get booked". It was cut, and the .moves / .move rules
   went with it. The reason is worth keeping: that block listed the same three
   products every competitor in this category sells, so it spent the best
   screen on the page establishing that we are interchangeable, immediately
   before the section whose entire job is to argue that we are not. The three
   products are still named in the hero lede and covered on /system.

   Layout is one tall photograph beside three stacked rows, not three columns.
   Columns squeezed each claim into a ~22ch measure and left the tag as an 11px
   chip you had to go looking for. Rows give the tag its own aligned gutter, so
   CONSULTING / SALES / ONE-ON-ONE stack into a vertical column of three loud
   words that can be read without reading anything else on the screen. That is
   the whole point of the section.                                            */
/* ---- THE BAND -------------------------------------------------------------
   The photograph is the ground of the section, not a <figure> in a column
   beside it. Boxed, it was a fourth rectangle competing with the 3 claim boxes
   for the same glance, and it read as clip art dropped next to the copy.

   It also does the job the hero hairline used to do badly. See .hero-join. */
.edge-sec{position:relative;overflow:hidden;isolation:isolate}
.edge-bg{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;
  /* Crop is per photograph, not per design, so the generator passes it in as
     --edge-pos on the section and this is only the fallback. The band is wide
     and short, so cover crops vertically and the Y value is the one that
     matters: outdoor shots with a lot of sky need pushing down the frame. */
  object-fit:cover;object-position:var(--edge-pos,50% 40%);
  filter:saturate(.5) contrast(1.02) brightness(.66);
  -webkit-mask-image:var(--photo-fade);
          mask-image:var(--photo-fade);
}
/* Two passes, listed top layer first.

   1. The vertical: seats the picture into the section. On .hero-join the top
      stop is cream and the dissolve out of the hero happens here.
   2. The horizontal: protects the copy. Near-opaque under the left rail where
      the head and the 3 rows live, opening to the right so the photograph is
      actually visible somewhere rather than being an expensive texture.

   Both read --ground rather than a named colour. It lands
   on --brown on both pages today, but it read --ox on /contractors because the
   trade grid above it shifted the alternation, and the same thing will happen
   again the moment a section is inserted above this one. See system.css.

   The horizontal pass is a variable because it has to be two different things.
   Below 1080 every line of copy runs the full measure, so there is no "right
   hand side" to leave open and a gradient that thins to 34% just puts the ends
   of sentences over bare photograph. It is near-even there. The left rail
   version only makes sense once the head stops short of the wrap. */
.edge-sec{
  --hscrim:linear-gradient(90deg,
    color-mix(in srgb,var(--ground) 90%,transparent) 0%,
    color-mix(in srgb,var(--ground) 82%,transparent) 100%);
}
@media (min-width:1080px){
  .edge-sec{
    --hscrim:linear-gradient(90deg,
      color-mix(in srgb,var(--ground) 94%,transparent) 0%,
      color-mix(in srgb,var(--ground) 88%,transparent) 46%,
      color-mix(in srgb,var(--ground) 52%,transparent) 78%,
      color-mix(in srgb,var(--ground) 34%,transparent) 100%);
  }
}
.edge-sec::after{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--neighbour) 82%,transparent) 0%,
      color-mix(in srgb,var(--neighbour) 30%,transparent) 16%,
      transparent 42%,
      color-mix(in srgb,var(--neighbour) 58%,transparent) 82%,
      var(--neighbour) 100%),
    var(--hscrim);
}
.edge-sec>.wrap{position:relative;z-index:2}

/* ---- ONE GROUND ----------------------------------------------------------
   Everything from under the hero down to the end of the questions band is a
   single uninterrupted oxblood surface. There are no slabs in that run.

   The generator still alternates .sec / .sec slab, and on every other area of
   the site that alternation is what gives a long page its rhythm. Here it was
   working against the layout. These pages carry four background photographs in
   five bands, and a ground that flips colour under every one of them means each
   photo is being scrimmed to a different target, each seam is a colour change
   AND a content change at the same y, and the page reads as a stack of
   unrelated slabs no matter how softly the edges are blended. Blending them was
   the previous attempt; removing the reason to blend is the better one.

   --ox is already the body background, so "no slab" is literally nothing to
   paint: the bands become transparent and the page shows through. That is why
   there is no seam left to treat — there is no second colour anywhere in the
   run for a seam to exist between.

   --neighbour collapses onto --ground here for the same reason, which keeps
   .edge-sec, .zip-sec and .faq-sec correct without touching their scrims. The
   merge on the reds is not gone; it is now the whole page.

   Three exclusions, and they are listed HERE rather than overridden later for
   one reason: this selector is (0,3,0) and a lone .faq-sec or .gte-sec is
   (0,1,0), so written the other way round those bands silently lose their
   grounds. Anything added to these pages that brings its own surface has to be
   named in this list.

     .cta      keeps its cream ground. It is the close and it is meant to arrive.
     .faq-sec  is the well, the one band deliberately pressed into the surface
               rather than part of it. Its ground is the shared .topo field.
     .gte-sec  is the guarantee, a shared component that carries its own glow
               ground (--brown-2 plus two blooms) on every page it appears on.
               It is the same object on the homepage and /system and it has to
               look the same here. */
.trade-hero ~ .sec:not(.cta):not(.faq-sec):not(.gte-sec){
  background:transparent;
  --ground:var(--ox);
  --neighbour:var(--ox);
}

/* ---- THE CARD ------------------------------------------------------------
   The card itself is `.hero-card` and it lives in system.css, because every
   page on the site now uses it. What stays here is only the part that is
   specific to these three pages: the trade hero is the cream, photographic
   version of it. See "THE RAISED HERO CARD" in system.css for why the edge is
   built this way and what was tried before it.                               */

/* Stacked on narrow screens, capped well short of the wrap so the photograph is
   not entirely buried under text and the body lines keep a readable measure. */
.edge-list{
  display:grid;
  /* The gap has to clear the badge that hangs off the top of each box. Half
     the badge (~15px) plus breathing room. */
  gap:clamp(24px,2.4vw,30px);
  align-content:start;
  margin-top:clamp(24px,2.6vw,32px);
  max-width:760px;
}
/* One row of 3 once there is room for it. Stacked, these 3 boxes ran 463px and
   put the section 91px past the fold on a 1440x900 screen, which is the one
   measurement this site does not get to fail. Across, they are 260px and the
   whole claim is legible in a single glance rather than a scroll.

   It also stops burying the photograph. The head above still only runs to 780 of
   a 1180 wrap, so the open right-hand side the horizontal scrim was built around
   is still there where the eye enters the band. The boxes carry their own fill
   and do not need the scrim to be readable. */
@media (min-width:1080px){
  .edge-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:none;
    gap:clamp(20px,1.9vw,26px);
  }
}

.edge{
  position:relative;isolation:isolate;
  /* Top padding clears the badge sitting on the border line above it. */
  padding:clamp(26px,2.5vw,32px) clamp(18px,2vw,26px)
          clamp(18px,1.8vw,23px) clamp(20px,2.2vw,28px);
  border:1px solid var(--line);
  /* Light from the left, where the post is. Carried at a much higher opacity
     than it was: these boxes sit over a photograph now, not over flat slab, so
     the fill has to be the thing that makes the copy readable. Still short of
     solid, which is what keeps the picture faintly present through them
     instead of stamping 3 opaque blocks onto it. */
  background:
    radial-gradient(100% 120% at 0% 50%,
      color-mix(in srgb,var(--ox-2) 94%,transparent),transparent 74%),
    color-mix(in srgb,var(--ox-deep) 76%,transparent);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:border-color .34s var(--ease),transform .34s var(--ease),
             box-shadow .34s var(--ease);
}
/* The post. Full height and solid at rest; this section is not waiting to be
   hovered to make its point. */
.edge::before{
  content:"";position:absolute;z-index:1;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--sand),
    color-mix(in srgb,var(--sand) 20%,transparent));
}
.edge:hover{
  border-color:color-mix(in srgb,var(--sand) 46%,transparent);
  transform:translateX(5px);
  box-shadow:0 26px 48px -30px color-mix(in srgb,var(--ox-deep) 92%,transparent);
}

/* A badge notched into the top edge, not a chip inside the box. Straddling the
   border line is what makes the panel read as layered rather than as another
   rectangle with a label in it, and it puts the one word this section is built
   to deliver outside the block of copy competing with it.

   CREAM ON OXBLOOD, which is the brand pairing and nothing else. This was a
   filled --accent badge, and --accent is the blush tan the tokens describe as
   "links, small marks, kickers" — a tertiary. Three of them stacked down the
   page at full saturation made the loudest element on the section a colour
   that appears nowhere in the logo. --cream ground with --ox type is exactly
   what the hero above is built from, at 12.3:1.

   The ring is --ground, which is whatever colour the band is actually sitting
   on (see system.css). That is what makes the badge read as punched THROUGH the
   border rather than stuck on top of it, and it used to be two hand-written
   pairs of rules — one for --ox, one for .slab — that got out of step the first
   time a section was removed and the alternation shifted under them.

   translate rather than a negative margin: it is out of flow either way, and
   this one does not reserve space it is going to give back. */
.edge-tag{
  position:absolute;z-index:3;
  top:0;left:clamp(20px,2.2vw,28px);transform:translateY(-50%);
  padding:7px 13px 6px;
  background:var(--cream);color:var(--ox);
  font-weight:900;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.1;white-space:nowrap;
  box-shadow:
    0 0 0 4px var(--ground),
    0 6px 18px -8px color-mix(in srgb,var(--ink) 80%,transparent);
  transition:box-shadow .34s var(--ease),transform .34s var(--ease);
}
.edge:hover .edge-tag{
  transform:translateY(-50%) translateX(3px);
  box-shadow:
    0 0 0 4px var(--ground),
    0 0 30px -6px color-mix(in srgb,var(--sand) 72%,transparent);
}

.edge-body{min-width:0}
.edge h3{font-size:clamp(19px,1.9vw,23px);margin:0 0 .46em;line-height:1.2}
.edge p{margin:0;font-size:14.5px;line-height:1.62;color:var(--sand-2)}

/* No reveal on .edge-bg. It is the section ground now, and fading a ground in
   on scroll means the band arrives as a hole in the page. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .edge{animation:edgeIn .7s var(--ease) both;
      animation-timeline:view();animation-range:entry 4% cover 26%}
    .edge-list .edge:nth-child(2){animation-range:entry 4% cover 30%}
    .edge-list .edge:nth-child(3){animation-range:entry 4% cover 34%}
  }
}
@keyframes edgeIn{from{opacity:0;transform:translate3d(-22px,0,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .edge,.edge-tag{transition:none}
  .edge:hover{transform:none}
  .edge:hover .edge-tag{transform:translateY(-50%)}
}

/* ---- THE LEAKS -----------------------------------------------------------
   The head sits in its own left-hand rail and the five rows run beside it,
   rather than the head spanning the full width with the rows stacked under it.
   Two reasons, and the first is the one that mattered: stacked, this section
   measured ~950px tall at 1440×900 and the last row and the note fell off the
   bottom of the screen. Side by side it comes in around 730 and the whole
   argument is visible at once — which is the point of a list of five things
   you are meant to count on your fingers.

   The rail is sticky so the h2 holds while the rows scroll past it on the way
   in. top clears the sticky nav.

   The rows were five hairlines with text between them and nothing else, which
   read as a spreadsheet with the gridlines turned off. What they have now:

   1. A numeral in a left gutter, outlined rather than filled, borrowed from
      the section that used to sit above this one. It is a counter, not a
      sequence — these are five independent holes and there is no order to fix
      them in — but it is what lets you see the length of the list without
      reading it, and it gives every row a fixed anchor on the left.
   2. A resting ground under each row instead of bare page, so a row is an
      object rather than a gap between two lines.
   3. A staggered reveal on scroll, which is the thing that makes a list of
      five arrive as five separate hits instead of one wall of grey.

   All three are deliberately height-neutral. This is the tightest section on
   these pages: at 1440x900 it clears the fold by about 50px on /hvac, so the
   numeral sits in a gutter and the ground replaces nothing rather than adding
   padding.                                                                   */
.leaks-grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(26px,3vw,40px);align-items:start;
}
@media (min-width:1000px){
  .leaks-grid{
    grid-template-columns:minmax(0,.96fr) minmax(0,1.4fr);
    gap:clamp(36px,4.2vw,62px);
  }
  .leaks-aside{position:sticky;top:clamp(92px,9vw,124px)}
}
/* The head is capped at 64ch for a full-width column; in a 380px rail that cap
   is never reached and the lede runs the rail's own width. */
.leaks-aside .trade-head{max-width:none}

.leaks{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.leak{
  position:relative;isolation:isolate;
  display:grid;grid-template-columns:clamp(44px,4.4vw,60px) minmax(0,1fr);
  align-items:start;gap:clamp(10px,1.2vw,16px);
  padding:clamp(15px,1.6vw,20px) clamp(12px,1.2vw,18px)
          clamp(15px,1.6vw,20px) clamp(14px,1.4vw,20px);
  border-bottom:1px solid var(--line);
  /* Resting ground, lightest possible. Enough that the row has a body; not so
     much that five of them stack into a slab. */
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--ox-deep) 54%,transparent),transparent 82%);
  transition:background .3s var(--ease),transform .3s var(--ease);
}
/* A short accent tick on the left edge of each row, drawn full height on
   hover. It is what stops five rules with text between them from reading as a
   spreadsheet. */
.leak::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);
  transform:scaleY(.46);transform-origin:50% 0;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
  opacity:.7;
}
.leak:hover{
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--ox-2) 62%,transparent),transparent 82%);
  transform:translateX(4px);
}
.leak:hover::before{transform:scaleY(1);opacity:1}

/* The counter. Outlined rather than filled so it sits behind the headline in
   the reading order instead of competing with it, and only where the browser
   can draw the outline: color:transparent with no stroke is an invisible
   number, so the @supports is load-bearing, not decoration.

   --sand, not --accent. Drawn in the accent these read gold, which is not a
   colour on this site: --accent is a blush sand used for links and small
   marks, and at 40px outlined it drifts far enough to look like a fifth
   colour nobody chose. The numerals are structure, so they are drawn in the
   same cream as the type they are numbering. */
.leak-n{
  align-self:start;
  font-size:clamp(28px,2.9vw,40px);line-height:.88;
  font-weight:900;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
  color:color-mix(in srgb,var(--sand) 34%,transparent);
  transition:color .34s var(--ease),-webkit-text-stroke-color .34s var(--ease);
}
@supports (-webkit-text-stroke:1px currentColor){
  .leak-n{
    color:transparent;
    -webkit-text-stroke:1.4px color-mix(in srgb,var(--sand) 62%,transparent);
  }
  .leak:hover .leak-n{-webkit-text-stroke-color:var(--sand)}
}
.leak:hover .leak-n{color:color-mix(in srgb,var(--sand) 82%,transparent)}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .leak{animation:leakIn .62s var(--ease) both;
      animation-timeline:view();animation-range:entry 2% cover 18%}
  }
}
@keyframes leakIn{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .leak,.leak::before,.leak-n{transition:none}
  .leak:hover{transform:none}
  .leak:hover::before{transform:scaleY(.46)}
}
.leak h3{font-size:clamp(17px,1.6vw,20px);margin:0 0 .35em;max-width:32ch}
.leak p{margin:0;font-size:14.5px;line-height:1.6;color:var(--sand-2);max-width:62ch}

.leak-note{margin-top:22px;max-width:62ch;font-style:italic;color:var(--sand-2)}

/* ---- OWN YOUR ZIP CODE ---------------------------------------------------
   The photograph used to be a figure in the right-hand column beside the list.
   It is the ground of the whole band now. This is the one section on the page
   whose entire argument is a place, and a street running behind the copy makes
   that argument in a way the same street in a box beside it does not. The list
   gets the full width back, which is also how 4 rows fit on one screen in 2
   columns instead of 4 stacked.

   The <img> is a real element rather than a CSS background: it keeps
   width/height so the band does not reflow on load, and it can be lazily
   fetched, which a background-image cannot.                                  */
.zip-sec{position:relative;overflow:hidden;isolation:isolate}
.zip-bg{
  position:absolute;z-index:0;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%;
  filter:saturate(.5) contrast(1.04) brightness(.6);
  /* The caps below already take this one to full ground at both ends, so this
     is belt and braces rather than a fix. It costs nothing and it means the
     band stays clean if those caps are ever retuned. */
  -webkit-mask-image:var(--photo-fade);
          mask-image:var(--photo-fade);
}
/* The scrim is the whole reason this is readable. Body copy over a photograph
   fails contrast at some point in every frame unless the photograph is most of
   the way to the ground colour first, so this is deliberately heavy: the
   picture is atmosphere, the list is the content.

   The vertical caps take the photograph all the way out to the ground at both
   ends, so the picture has no top or bottom edge and the band above it appears
   to be the same surface, lit differently. This is "the merge on the reds" and
   it is approved: the caps are what make it work, do not thin them.

   They read --neighbour rather than --ground. Under ONE GROUND those are the
   same oxblood on all three pages, so this is currently a distinction without a
   difference — but it is the correct one. The cap's job is to match what is on
   the other side of the seam, not to match the band it belongs to, and if a
   slab ever comes back to this run that is the token that stays right. */
.zip-sec::after{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--neighbour) 94%,transparent) 0%,
      color-mix(in srgb,var(--neighbour) 78%,transparent) 46%,
      color-mix(in srgb,var(--neighbour) 56%,transparent) 100%),
    linear-gradient(180deg,
      var(--neighbour) 0%,transparent 18%,transparent 78%,var(--neighbour) 100%);
}
.zip-sec>.wrap{position:relative;z-index:2}

/* 2 columns of 2 rows rather than 4 stacked. The rows are short and the band
   now has a picture under it that wants to be seen, so height here is the
   thing worth spending least of. */
.zip-list{
  list-style:none;margin:clamp(24px,2.6vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr;
  gap:0 clamp(28px,3.4vw,56px);
  border-top:1px solid var(--line);
}
@media (min-width:820px){
  .zip-list{grid-template-columns:1fr 1fr}
  /* Both columns need the top rule, and only the bottom 2 rows should carry a
     bottom rule. With 4 items in 2 columns that is items 3 and 4. */
  .zip-list li:nth-child(2){border-top:1px solid var(--line);margin-top:-1px}
}
.zip-list li{
  padding:clamp(12px,1.3vw,16px) 0;
  border-bottom:1px solid var(--line);
}
.zip-list b{
  display:block;margin-bottom:4px;
  font-size:clamp(16px,1.55vw,18.5px);line-height:1.3;color:var(--sand);
}
.zip-list span{display:block;font-size:14px;line-height:1.55;color:var(--sand-2)}

/* ---- TRADE GRID ---------------------------------------------------------
   GONE. .trades / .trade-tile / .trades-rest / .trades-sec lived here and were
   used by /contractors alone: a 4-up picture grid of Plumbing, Pest control,
   Landscaping and Pressure washing sitting directly under that hero.

   The shop is HVAC and roofing only now. The page was deleted, which left this
   block styling nothing, so it went with it rather than sitting here as dead
   weight that still reads like a live feature. It is in git if a third trade
   page ever comes back, but note that a 2-trade site has nowhere to put a
   4-up grid of trade names, so it would need rethinking rather than reviving.
   ------------------------------------------------------------------------- */

/* ---- QUESTIONS -----------------------------------------------------------
   The accordion itself is /css/faq.css and is NOT touched here: that sheet is
   shared with the homepage. Everything below hangs off .faq-sec, which only the
   3 trade pages carry.

   THE WELL. This band is the one place on these pages that is deliberately NOT
   part of the continuous ground. It is pressed into it.

   The ground is `.topo`, the shared contour field defined in system.css and
   used by THE DIFFERENCE and QUESTIONS on the homepage. The markup carries
   both classes and the surface comes entirely from .topo — there is no
   background declared here, on purpose. trade.css loads after system.css, so
   any `background` in this rule would win and silently kill the terrain.

   An earlier pass here painted its own contour layer: topo.svg at 20% straight
   over --ox. That failed for a reason worth keeping written down. A translucent
   texture laid over the SAME colour as its neighbours cannot separate anything;
   it was a pattern on a surface when the surface was the problem. .topo works
   because it is not a texture at all, it is a whole ground — a --brown base,
   a warm bloom under the headline, and a vignette pulling the corners down into
   --ox-deep. The corners are what does the separating. The lines are detail on
   top of that, not the effect itself.

   Rounded on all four corners and lit the way a recess is lit: shadow along the
   inside of the top edge, a thin highlight along the inside of the bottom one.
   That is the hero card's lighting inverted, on purpose. The hero comes toward
   you, this goes away from you, and the questions land in a hollow at the end
   of the page.                                                                */
.faq-sec{
  --ground:var(--brown);
  --neighbour:var(--ox);
  isolation:isolate;
  border-radius:clamp(20px,2.6vw,38px);
  /* The recess. Top-inner shadow is the deep one because the implied light is
     above; the bottom gets a 1px lit lip where the floor turns back up to meet
     the page. Both are inset, which is the entire difference between this and
     the card. */
  box-shadow:
    inset 0 18px 30px -18px color-mix(in srgb,var(--ink) 92%,transparent),
    inset 0 -1px 0 color-mix(in srgb,var(--sand) 9%,transparent);
  /* Clears the radius at both ends so the first and last rows are not sitting in
     a corner. */
  padding-block:clamp(52px,5vw,82px);
}

/* No panel around the rows. The well IS the panel, and a card inside a recess
   is one frame too many. The rows read straight off the contour ground the same
   way they do on the homepage. */
.faq-sec .faq:last-child{border-bottom:0}

/* A rule under the heading, pulling the eye down into the panel. The heading is
   capped at 24ch and centred (faq.css), so this is sized to it rather than run
   to the full measure. */
.faq-sec .faqs-h{position:relative;padding-bottom:clamp(16px,1.8vw,22px)}
.faq-sec .faqs-h::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:2px;
  background:linear-gradient(90deg,
    transparent,var(--accent),transparent);
}