/* Tacentia homepage. Two families, self-hosted; no third-party requests, no JavaScript. */

@font-face {
  font-family: "EB Garamond";
  src: url(/fonts/EBGaramond-Upright.woff2) format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url(/fonts/EBGaramond-Italic.woff2) format("woff2-variations");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url(/fonts/SourceSans3VF-Upright.woff2) format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root{
  --ink:#1c1a17;
  --ink-2:#26231f;
  --cream:#f9f7f2;
  --cream-2:#f1ede3;
  --yellow:#E8B21F;
  --yellow-hover:#D9A414;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cream:#f6f3ec;}}
:root[data-theme="dark"]{--cream:#f6f3ec;}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 40px}

/* grounds */
.on-ink{background:var(--ink);color:var(--cream)}
.on-ink-2{background:var(--ink-2);color:var(--cream)}
.on-cream{background:var(--cream);color:var(--ink)}
.on-cream-2{background:var(--cream-2);color:var(--ink)}
.on-yellow{background:var(--yellow);color:var(--ink)}
.on-ink .muted,.on-ink-2 .muted{color:color-mix(in srgb,var(--cream) 70%,transparent)}
.on-cream .muted,.on-cream-2 .muted{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.on-yellow .muted{color:color-mix(in srgb,var(--ink) 75%,transparent)}

/* type */
.wordmark{font-family:var(--serif);font-weight:600;font-size:inherit;line-height:1;letter-spacing:.005em}
/* EB Garamond has a kern feature but no T-a pair, so "acentia" sits out beyond the T's arm.
   Tuck it in by hand. In em, so it holds at every size the wordmark is set at. */
.w-rest{margin-left:-.11em}
h1{font-weight:500;font-size:clamp(48px,6vw,92px);line-height:1.02;letter-spacing:-.005em}
h2{font-weight:500;font-size:clamp(34px,3.6vw,52px);line-height:1.08;letter-spacing:-.005em}
h3{font-weight:500;font-size:24px;line-height:1.2}
.big{font-style:italic;font-weight:400;font-size:clamp(26px,2.6vw,36px);line-height:1.22}
.label{font-family:var(--sans);font-size:14px;letter-spacing:.08em;text-transform:uppercase}
p.body{max-width:58ch}
p.body+p.body{margin-top:14px}
.accent{color:var(--yellow)}
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:18px;line-height:1;color:#1c1a17;background:var(--yellow);padding:18px 32px;transition:background .12s ease}
.btn:hover{background:var(--yellow-hover)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn.ghost:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.btn.ink{background:var(--ink);color:var(--cream)}
.btn.ink:hover{background:var(--ink-2)}

/* header + hero on ink */
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero-body{flex:1;display:flex;align-items:center;justify-content:center;padding:94px 0 24px;text-align:center}
.hero-body .wrap{display:block}
.hero h1{max-width:34ch;margin:0 auto;font-size:clamp(28px,3.1vw,42px);line-height:1.2}
.hero .sub{font-size:clamp(20px,1.9vw,27px);line-height:1.4;max-width:none;margin:28px auto 0}
.hero .cta{margin-top:40px;display:flex;justify-content:center}
.hero>*{position:relative;z-index:1}

/* alternating halves */
/* PLACEHOLDER: empty ground until the photograph lands. The reference's hatch is not drawn. */
.ph{position:absolute;inset:0}
.ph.photo{background:var(--cream-2)}
.on-ink .ph.photo,.on-ink-2 .ph.photo{background:var(--ink-2)}
.questions{list-style:none;display:flex;flex-direction:column;gap:0}
.questions li{padding:26px 0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.questions li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.questions .q{font-style:italic;font-size:clamp(22px,1.9vw,27px);line-height:1.25;display:block}
.questions .a{display:block;margin-top:10px;font-size:19px;line-height:1.45}

/* product shot band */
.product{padding:128px 0}
.product .wrap{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center}
/* PLACEHOLDER: empty ground until the screenshot lands. The reference's mock table is not drawn. */
.product .shot{margin:0}
.product .shot img{aspect-ratio:4/3;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
/* A light UI on ink needs an edge, or it floats. */
.product .shot img{display:block;width:100%;height:100%;object-fit:cover;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cream) 20%,transparent)}
/* In flow, not positioned: the caption runs to three lines and an absolutely
   positioned one at bottom:-40px overlapped the image. */
.product .shot figcaption{margin-top:16px;font-family:var(--sans);font-size:14px;line-height:1.45;color:color-mix(in srgb,var(--cream) 60%,transparent)}
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:1px solid color-mix(in srgb,var(--cream) 25%,transparent)}
.stages div{padding:24px 24px 0 0}
.stages .n{font-size:44px;font-weight:500;line-height:1;font-variant-numeric:oldstyle-nums}
.stages .s{font-family:var(--sans);font-size:15px;margin-top:8px;color:color-mix(in srgb,var(--cream) 70%,transparent)}
.stages .s b{color:var(--cream);font-weight:600;display:block;margin-bottom:2px}

/* statement band */
.band{padding:75px 0;text-align:center}
.band .big{max-width:28ch;margin:0 auto;font-size:clamp(30px,3.4vw,48px);font-style:italic}
.band .sub{margin-top:24px;font-size:20px}
/* "Why now": the band pattern on the second ink, so it reads as its own block
   directly under the hero without needing a rule to divide them. */
.band.why{padding:96px 0}
.band.why .label{color:var(--yellow);margin-bottom:22px}
.band.why .big{max-width:38ch;font-size:clamp(26px,2.6vw,36px)}

/* own: ledger */
/* "What we build" and "What you own" share a shape: a label-and-heading column
   beside the content, both inside the page's measure. */
.build,.own{padding:128px 0}
.build .wrap{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start}
.own .wrap{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start}
.ledger{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.ledger>div{padding:28px 32px 28px 0}
.ledger>div+div{padding-left:32px;border-left:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.ledger h3{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.ledger ul{list-style:none}
.ledger li{padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent);font-size:18px}
.own .promise{margin-top:40px;padding:28px 0 0;border-top:1px solid var(--ink)}
.own .promise .big{font-size:clamp(24px,2.2vw,30px)}
/* Two statements, not one paragraph. */
.own .promise .big + .big{margin-top:20px}

/* people */
.people{padding:128px 0}
.people .wrap{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.person{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start}
/* PLACEHOLDER: empty ground until the portraits land. The reference's engraving is not drawn. */
/* The portraits are supplied at 3:4, already cropped and head-matched, so object-fit only
   guards against a replacement arriving at another shape. The width and height attributes
   carry the ratio, so the row holds its height before the image decodes. */
.portrait{aspect-ratio:3/4;width:100%;height:auto;object-fit:cover;background:var(--cream-2);position:relative;display:block}
.person h3{margin-bottom:6px}
.person .role{font-family:var(--sans);font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px}
.person p{font-size:18px}
/* One statement, alone in its row since the button was removed: centred, and at a
   measure that keeps it from running the full width. */
.people .close{grid-column:1/-1;margin-top:24px;padding-top:40px;border-top:1px solid var(--ink);display:block;text-align:center}

/* ---- Closing block and footer --------------------------------------------------------------
   One ink block: the headline left, the two buttons right, then a single footer row. The
   headline holds three lines by its measure rather than a <br>, so the break moves with the
   type instead of being pinned to one width. */

.closing{padding:120px 0 0;position:relative;overflow:hidden}
.closing .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:48px;
  align-items:center;padding-bottom:96px}
/* The break is in the markup, after the accent, so the measure does not need to force
   it; the headline is the two lines as written at every width. */
.closing h2{max-width:none}
.closing .accent{color:var(--yellow);white-space:nowrap}
.closing .cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}

/* Every footer on the site: one shape, whatever ground it sits on. The homepage's and the
   cream pages' were written separately and drifted to 24/24 against 32/48. */
footer,.legal-footer{padding:24px 0;font-family:var(--sans);font-size:15px;
  border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
footer .wrap,.legal-footer .wrap{display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:center;gap:12px 32px}
/* One row: copyright left, legal links right. The selector has to out-specify
   .closing .wrap, a two-column grid, since the footer sits inside .closing. */
/* Also resets .closing .wrap's 48px gap, which the footer would otherwise inherit. */
.closing footer .wrap{display:flex;gap:12px 32px;padding-bottom:0}
.foot-meta{display:flex;align-items:center;gap:28px;margin:0;
  color:color-mix(in srgb,var(--cream) 70%,transparent)}
.foot-meta a{color:inherit;text-decoration:none}
.foot-meta a:hover,.foot-meta a:focus-visible{color:var(--cream)}

@media (max-width:960px){
  .hero-body .wrap,.product .wrap,.build .wrap,.own .wrap,.people .wrap,.closing .wrap{grid-template-columns:1fr}
  .build .wrap{gap:32px}
    .closing .cta{justify-content:flex-start}
  }
@media (max-width:600px){
  body{font-size:18px}
  .wrap{padding:0 22px}
  header{padding:24px 0}
  .hero-body{padding:72px 0 24px}
    .product,.own,.people{padding:80px 0}
  .band{padding:72px 0}
  /* Stacked, not a 120px column beside the bio: at 390 that column pushed the row
     past the viewport and put the whole page into horizontal scroll. */
  .person{grid-template-columns:1fr;gap:16px}
  .portrait{width:120px}
  .stages{grid-template-columns:1fr}
  .ledger{grid-template-columns:1fr}
  .ledger>div+div{padding-left:0;border-left:0;border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
}
@media (prefers-reduced-motion: reduce){.btn{transition:none}}

/* ---- Sticky header -------------------------------------------------------------------------
   One bar, fixed at the top, which takes the ground of the block behind it. The colour swap is
   driven by a small script; with JavaScript off the bar keeps the ink ground it ships with and
   stays perfectly legible over the hero. */

#bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 20px 0;
}
#bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#bar nav { display: flex; align-items: center; gap: 32px; }
#bar .link {
  font-family: var(--sans);
  font-size: 17px;
  color: color-mix(in srgb, currentColor 75%, transparent);
}
#bar a.link:hover { color: currentColor; }
#bar .btn { padding: 14px 24px; font-size: 16px; }

/* The hero no longer holds the header, so it reserves the bar's height instead. */
.hero-body { padding-top: 124px; }

/* On the yellow band a yellow button disappears, so it inverts to ink there. */
#bar.on-yellow .btn { background: var(--ink); color: var(--cream); }

@media (max-width: 960px) {
  #bar .link { display: none; }
}
@media (max-width: 600px) {
  #bar { padding: 14px 0; }
  .hero-body { padding-top: 92px; }
}

/* ---- Lockup --------------------------------------------------------------------------------
   "Tacentia" in cream over the yellow line drawn from EB Garamond 600's square bracket, laid on
   its back with its end-strokes cut to 0.85x. It is an image: outlined paths, no live text and
   no CSS rule imitating the line.

   Ink only. The header changes ground as the page scrolls, so it holds both marks and paints
   one: the lockup over ink, the plain live-text wordmark over cream and yellow. Below 200px
   wide the lockup is not used at all, which is why the 390 header drops to the wordmark. */

/* The mark sits left of the name, its box set to the wordmark's cap height so the grid's top
   lands on the T's cap line and the yellow rule on the baseline. The gap is 0.35 x the mark's
   width, per the brief. Both are in one flex row aligned on the text's baseline box. */
.brand {
  display: flex;
  /* The mark is aligned to the top of the row and translated onto the cap line, rather than
     left to flex's baseline rules: align-items:baseline seats an SVG's bottom EDGE on the
     baseline, not its box, and a margin on a flex item pushes it the wrong way. */
  align-items: flex-start;
  /* 0.22 x the mark's width. The brief sets 0.35, which left the two reading as separate
     objects rather than one lockup. */
  gap: .1544em;
  text-decoration: none;
  font-size: 47px;
  line-height: 1;
}



@media (max-width: 600px) {
  /* 150px is the floor the brief sets for the lockup; below it the wordmark stands alone. */
    }

@media (max-width: 700px) {
  .hero-body { padding: 84px 0 68px; }
}


/* The nav link for the section behind the bar. The rule is positioned against the link rather
   than added to it: as generated content in flow it made the link 7px taller, and the flex row
   centres its items, so the text of the current link rose 3.5px above its neighbours. Out of
   flow the link's box is identical whether it is current or not.

   Every link carries the anchor, not just the current one, so gaining the class changes nothing
   about the box. */
#bar .link { position: relative; }
#bar .link.is-current { color: currentColor; }
#bar .link.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  /* The link's own colour, not the yellow: the logo already carries a yellow line on this row,
     and two at the same weight read as a pair rather than as two different things. This also
     needs no special case for the yellow band, where a yellow rule would have vanished. */
  background: currentColor;
}

/* ---- The mark ------------------------------------------------------------------------------
   A 2x2 grid with the bottom-right cell replaced by a yellow rule at that cell's baseline.
   Cells take currentColor, so they follow the ground the header is over; the rule reads
   --yellow from the nearest ancestor, so a palette change reaches it without editing the SVG. */

.mark {
  /* The wordmark's cap height, so the mark's total height equals the T's: the grid's top on
     the cap line, its bottom on the baseline, with the yellow rule inside that span. A taller
     box was tried and overshot the T; the cells had only looked small because the mark was
     seated 14px low at the time. */
  width: .702em;
  height: .702em;
  flex: none;
  color: var(--ink);
  /* Seats the grid's top on the T's cap line. Measured from the RENDERED PIXELS, which is the
     only method that agreed with the page: canvas measureText's ascent and a Range's bounding
     box each report a different cap line for EB Garamond, and tuning against either gave a
     confident 0.00px while the mark was visibly 14px out. In em, so it holds at every size. */
  transform: translateY(0.1490em);
}
/* gap is set in em on .brand, which is 0.35 x the mark's width since both derive from the
   same font-size. */
.on-ink .mark, .on-ink-2 .mark, #bar.on-ink .mark, #bar.on-ink-2 .mark { color: var(--cream); }
/* A single-colour cut: the rule takes the cell colour. */
.mark.mono { --yellow: currentColor; }
/* The yellow band is the rule's own colour, so there the mark takes the mono cut and the rule
   reads in the cells' ink. Without it the rule is invisible and the mark is three cells and a
   gap. */
#bar.on-yellow .mark { --yellow: currentColor; }

/* The header's type at phone width. This must sit after .brand's own font-size: declared
   earlier in the file it lost to it on source order, media query notwithstanding, and the
   mark and name stayed at their desktop size at every width. */
@media (max-width: 600px) {
  .brand { font-size: 39px; }
}

/* A person's profile link: the icon alone, beside the name. It takes currentColor so it
   follows the ground, and sits at the name's own size. The link carries an aria-label, since
   an aria-hidden icon is its only content. */
.profile {
  display: inline-flex;
  /* Sit on the name's baseline rather than centred in the line box, which left the icon
     8.75px above it. The nudge is the glyph's own bearing inside its 24-unit box. */
  align-items: baseline;
  margin-left: .4em;
  color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration: none;
  vertical-align: baseline;
}
.profile:hover, .profile:focus-visible { color: currentColor; }
.profile .icon { width: .72em; height: .72em; flex: none; transform: translateY(0.3454em); }

/* The sentence breaks after "take," in the markup. Its size is fluid rather than stepped so
   the first line always fits on one: with a 26px/19px step it needed 24px at 700 and 17px at
   480, and at both the line wrapped and stranded "take," on its own. */
.people .close .big{font-size:clamp(15px,2.6vw,36px)}

/* The closing block stacks below 900px: buttons under the headline, left-aligned. */
@media (max-width: 899px) {
  .closing .wrap{grid-template-columns:1fr;align-items:start}
  .closing .cta{justify-content:flex-start}
}
@media (max-width: 600px) {
  .closing{padding-top:72px}
  .closing .wrap{padding-bottom:56px}
  .foot-meta{gap:20px}
}

/* A person's links, under their bio. */
.person-links{display:flex;gap:24px;margin-top:14px;font-family:var(--sans);font-size:15px;
  color:color-mix(in srgb,var(--ink) 70%,transparent)}
.person-links a{color:inherit;text-decoration:none}
.person-links a:hover,.person-links a:focus-visible{color:var(--ink)}

/* The retain column's licence note: a statement about the list, not an item in it. */
.retain-note{margin-top:12px;font-size:18px;line-height:1.45;
  color:color-mix(in srgb,var(--ink) 70%,transparent)}

@media (max-width: 600px) {
  .questions .a{font-size:18px}
}

/* Below 480px a button takes the full measure rather than sitting at its text's width. */
@media (max-width: 479px) {
  .hero .cta, .closing .cta, .people .close .cta { display: flex; flex-direction: column; }
  .hero .cta .btn, .closing .cta .btn, .people .close .btn { width: 100%; text-align: center; }
}

/* The legal pages: one measure, generous leading, and a footer of the same two rows. */
.legal{padding:140px 0 96px}
.legal .wrap{max-width:720px}
.legal h1{font-size:clamp(34px,4vw,52px);line-height:1.12;margin:0}
/* 65%, not 60%: at 60% this measured 4.40:1 on the cream and AA wants 4.5 for text. */
.legal .updated{font-family:var(--sans);font-size:15px;margin:16px 0 0;
  color:color-mix(in srgb,var(--ink) 65%,transparent)}
.legal h2{font-size:clamp(22px,2vw,26px);line-height:1.2;margin:48px 0 0}
.legal p{font-size:19px;line-height:1.55;margin:16px 0 0;color:var(--ink-80,inherit)}
.legal ul{margin:16px 0 0;padding-left:1.1em}
.legal li{font-size:19px;line-height:1.55;margin-top:6px}
.legal a{color:inherit}
.legal-footer .foot-meta{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.legal-footer a:hover,.legal-footer a:focus-visible{color:var(--ink)}

@media (max-width:600px){
  .legal{padding:104px 0 64px}
  footer .wrap,.legal-footer .wrap,.closing footer .wrap{flex-direction:column;
    align-items:flex-start}
}

/* ---- /talk ---------------------------------------------------------------------------------
   Two columns: Peter on the left, the form on the right, with the opening line across both. */

.talk{padding:120px 0 96px}
/* No max-width of its own: the site's .wrap is 1200px, and 1120 here started the
   content 40px inside the header's logo. */
.talk .wrap{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start}
.talk-head{grid-column:1/-1;margin-bottom:24px}
.talk-head .big{max-width:34ch;margin:14px 0 0}

/* The asset is 4:5; here it is a square. Declaring the ratio reserves the right
   height before it loads, which a 480x640 attribute pair does not. */
.talk-peter .portrait{width:200px;height:200px;aspect-ratio:1;object-fit:cover}
.talk-peter h2{font-size:24px;line-height:1.2;margin:20px 0 0}
.talk-peter .role{margin-top:6px}
.talk-mail{margin:16px 0 24px;font-family:var(--sans);font-size:15px}
.talk-mail a{color:color-mix(in srgb,var(--ink) 70%,transparent);text-decoration:none}
.talk-mail a:hover,.talk-mail a:focus-visible{color:var(--ink)}

.talk-form .label{margin-bottom:28px;display:block}
.field{margin-bottom:32px}
.field label{display:block;font-family:var(--sans);font-size:15px;margin-bottom:8px;
  color:color-mix(in srgb,var(--ink) 70%,transparent)}
.field input,.field textarea,.field select{display:block;width:100%;box-sizing:border-box;
  font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent);
  border-radius:0;padding:8px 0;appearance:none}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--ink)}
/* No red: the page has two colours and an error is not a third. */
.field-error{margin:8px 0 0;font-family:var(--sans);font-size:15px;color:var(--ink)}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.talk-result{max-width:34ch}

@media (max-width:899px){
  .talk .wrap{grid-template-columns:1fr;gap:48px}
  .talk-head{margin-bottom:0}
}
@media (max-width:600px){
  .talk{padding:72px 0 64px}
  .talk-peter .portrait{width:150px}
}

/* ---- FAQ -----------------------------------------------------------------------------------
   The same shape as What you own: a heading column beside the content. A dl, because that is
   what a list of questions and answers is. */

.faq{padding:128px 0}
.faq .wrap{display:grid;grid-template-columns:4fr 8fr;gap:72px;align-items:start}
.faq dl{margin:0}
.faq dt{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.3;
  padding-top:26px;border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.faq dt:first-child{padding-top:0;border-top:0}
.faq dd{margin:10px 0 26px;font-size:19px;line-height:1.45;
  color:color-mix(in srgb,var(--ink) 80%,transparent)}
.faq dd:last-child{margin-bottom:0}

/* The continuity lines under the data promise. */
.after{list-style:none;margin:24px 0 0;padding:0}
.after li{font-size:18px;line-height:1.45;padding-left:18px;position:relative;margin-top:10px}
.after li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:2px;
  background:var(--yellow)}

@media (max-width:960px){
  .faq{padding:80px 0}
  .faq .wrap{grid-template-columns:1fr;gap:32px}
}

/* On a short page the footer sits at the bottom of the viewport rather than halfway up it.
   A flex column, not position:fixed: on a long page the footer still follows the content. */
body.page{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body.page main{flex:1 0 auto}
body.page footer{flex-shrink:0}
/* The select carries its own chevron, since appearance:none removes the native one. */
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231c1a17' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:12px 8px;
  padding-right:24px;cursor:pointer}
/* "optional" beside a label: quieter than the label, never mistaken for part of it.
   65%, not 50%: at 50% it measured 3.27:1 on the cream and AA wants 4.5. */
.opt{font-size:13px;color:color-mix(in srgb,var(--ink) 65%,transparent);margin-left:6px}

/* ---- Testimonials --------------------------------------------------------------------------
   In the People grid, so each quote falls under the person it is about. Static: both are in the
   raw HTML, with no rotation, carousel or timer. */

.quote{margin:0;padding-top:48px;padding-bottom:40px;
  border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.quote p{margin:0;font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.35;
  color:color-mix(in srgb,var(--ink) 85%,transparent)}
.quote cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;
  font-size:15px;color:color-mix(in srgb,var(--ink) 65%,transparent)}
.quote .who{font-weight:600}

@media (max-width:960px){
  .quote{padding-top:32px;padding-bottom:0}
  .quote p{font-size:20px}
  /* Stacked, the pair reads as two blocks rather than a row, so the rule belongs above each. */
  .quote-jordi{padding-top:32px}
}