/* ==========================================================================
   caffeinegroup.com — main.css
   Editorial Bold, carrying the Caffeine Group identity.

   Tokens are settled and verified against WCAG. Do not re-derive them and do
   not introduce new colours — see CLAUDE.md and
   docs/Editorial-Bold-Fit-Assessment.md.

   Three rules that are easy to break by accident:
   1. Roast (--accent) never exceeds 4% of a composition, except ONE deliberate
      Roast-field surface per page.
   2. Anything accent-coloured sitting on ink uses --accent-hot. Roast itself
      fails there at 2.17:1.
   3. There is no serif. The mono credential voice takes every emphasis slot.
   ========================================================================== */

/* ---- webfonts ------------------------------------------------------------
   Self-hosted. Archivo is the VARIABLE family so wdth 76% works at display
   sizes — Archivo Black has no width axis and the compression is load-bearing.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ==========================================================================
   CAFFEINE GROUP × EDITORIAL BOLD
   Homepage sketch. The kit's six tokens re-pointed at the approved identity
   palette; the serif slot replaced by the monospace credential voice.
   ========================================================================== */
:root{
  /* ---- the six swaps ------------------------------------------------- */
  --paper:      #F6F1E9;   /* cream, from the artwork            */
  --ink:        #010101;   /* black, from the artwork            */
  --accent:     #8C2C22;   /* mid red — paper surfaces, 7.48:1   */
  --accent-hot: #E01F26;   /* bright red — ink surfaces, 4.37:1  */
  --sans: 'Archivo','Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;
  --mono: 'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --text: 'Inter','Helvetica Neue',Helvetica,Arial,'Segoe UI',sans-serif;

  /* ---- derived from Espresso + Steam, not from MUSF ink --------------- */
  --paper-2:#E5E0D9; --paper-3:#D1CDC6;
  --ink-2:#1A1918;   --ink-3:#373634;
  --crema:  #ECE7E0;                       /* inset panels               */
  --deep:   #71261D;  /* deepest red — heavy rules, the Roast field */
  --filter: #545350;                       /* NON-TEXT ONLY — 3.55:1     */
  --rule:      1px solid rgba(1,1,1,.92);
  --rule-mid:  1px solid rgba(1,1,1,.38);
  --rule-soft: 1px solid rgba(1,1,1,.15);
  --rule-cream:1px solid rgba(246,241,233,.28);
  --hair:      rgba(1,1,1,.15);
  --dim:       rgba(1,1,1,.66);
  --dim-cream: rgba(246,241,233,.68);
  --mid:       #522A26;                    /* plate mid-tone             */

  --t-mega: clamp(3.3rem,13vw,15.5rem);
  --t-xxl:  clamp(2.5rem,7vw,6.6rem);
  --t-xl:   clamp(1.9rem,3.7vw,3.4rem);
  --t-l:    clamp(1.35rem,2.1vw,2rem);
  --t-m:1.125rem; --t-body:1.0313rem; --t-sm:.8125rem; --t-xs:.6875rem;

  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;
  --s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;

  --r-0:0px; --r-pill:999px;
  --gut:clamp(16px,3.2vw,44px); --max:1560px;
  --fast:120ms cubic-bezier(.2,0,0,1);
  --med:160ms cubic-bezier(.2,0,0,1);
  --slow:200ms cubic-bezier(.2,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:var(--t-body);line-height:1.5;
  letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.03em;line-height:.92}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
figcaption{margin-top:9px;padding-top:8px;border-top:var(--rule-soft)}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.on-ink :focus-visible{outline-color:var(--accent-hot)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:200;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:8px;top:8px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* NOTE — one hard limit on the bright red.
   --accent-hot (#E01F26) is 4.25:1 on paper, just UNDER the 4.5 needed for
   text. It is 4.37:1 on ink, which clears comfortably. So: bright red is for
   ink surfaces, and for fills, keylines and the red module on paper — never
   for small text on paper. Small accent text on paper uses --accent. */

/* ---- primitives ------------------------------------------------------ */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.display{font-family:var(--sans);font-weight:800;font-stretch:84%;
  letter-spacing:-.035em;line-height:.9;text-transform:uppercase}
.mega{font-family:var(--sans);font-weight:900;font-stretch:76%;font-size:var(--t-mega);
  line-height:.8;letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance}
/* The credential voice replaces the kit's serif italic in every emphasis slot. */
.cred{font-family:var(--mono);font-weight:500;letter-spacing:.24em;text-transform:uppercase}
.eyebrow{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.2}
.eyebrow--accent{color:var(--accent)}
.cap{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);line-height:1.35}
.dim{color:var(--dim)} .accent{color:var(--accent)}
.num{font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.05rem,1.32vw,1.28rem);line-height:1.42;letter-spacing:-.015em;color:var(--ink-2)}
/* the red module — the brand's full stop */
.mod{display:inline-block;width:.5em;height:.5em;background:var(--accent);vertical-align:.02em}
.on-ink .mod{background:var(--accent-hot)}

.band{border-top:var(--rule);padding-block:clamp(40px,5.2vw,84px)}
.band--tight{padding-block:clamp(22px,2.6vw,38px)}
.band--ink{background:var(--ink);color:var(--paper);border-top-color:var(--ink)}
.band--ink .cap,.band--ink .dim{color:var(--dim-cream)}
.band--accent{background:var(--accent);color:var(--paper);border-top-color:var(--accent)}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4) var(--s6);
  justify-content:space-between;margin-bottom:var(--s6)}
.sechead h2{font-size:var(--t-xl)}
.sechead .kicker{display:flex;align-items:baseline;gap:14px}
.sechead .idx{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  color:var(--accent);font-weight:600}
.band--ink .sechead .idx{color:var(--accent-hot)}

/* A section head whose summary is a real sentence rather than a status line.
   The mono cap voice tops out at about a dozen words; past that it becomes a
   wall of tracked uppercase. These heads stack instead, headline over lede. */
.sechead--lede{display:block}
.sechead--lede .lede{margin-top:var(--s4);max-width:62ch}

/* ---- voices ----------------------------------------------------------
   The recognition block: sentences in the buyer's own words, set in the mono
   credential voice so they read as overheard rather than written by us. */
.voices{display:grid;gap:0;border-top:var(--rule);border-left:var(--rule)}
.voices>*{border-right:var(--rule);border-bottom:var(--rule);min-width:0}
@media(min-width:760px){.voices{grid-template-columns:repeat(2,1fr)}}
.voice{padding:var(--s5) var(--s5) var(--s5) calc(var(--s5) + 26px);position:relative}
.voice::before{content:"\201C";position:absolute;left:var(--s4);top:calc(var(--s5) - .12em);
  font-family:var(--sans);font-weight:900;font-size:2.1rem;line-height:1;color:var(--accent)}
.voice p{font-family:var(--mono);font-size:var(--t-sm);line-height:1.5;letter-spacing:.005em;
  color:var(--ink);max-width:36ch}
.band--ink .voices,.band--ink .voices>*{border-color:rgba(246,241,233,.28)}
.band--ink .voice p{color:var(--paper)}
.band--ink .voice::before{color:var(--accent-hot)}
.voices-foot{margin-top:var(--s5);max-width:56ch}

.gridbox{display:grid;border-top:var(--rule);border-left:var(--rule)}
.gridbox>*{border-right:var(--rule);border-bottom:var(--rule);min-width:0}
.band--ink .gridbox{border-color:rgba(246,241,233,.28)}
.band--ink .gridbox>*{border-color:rgba(246,241,233,.28)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.cell{padding:var(--s5)}

/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:15px 22px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);border-radius:var(--r-0);cursor:pointer;
  transition:background var(--fast),color var(--fast),border-color var(--fast),
             box-shadow var(--fast),transform var(--fast)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn:active{transform:translate(2px,2px)}
.btn--accent{background:var(--accent);border-color:var(--accent)}
.btn--accent:hover{background:var(--ink);border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--big{padding:19px 30px;font-size:var(--t-sm);letter-spacing:.14em}
.on-ink .btn--ghost{color:var(--paper);border-color:rgba(246,241,233,.5)}
.on-ink .btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.band--accent .btn{background:var(--paper);color:var(--accent);border-color:var(--paper)}
.band--accent .btn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:2px solid var(--accent);
  transition:color var(--fast),border-color var(--fast),gap var(--fast)}
.tlink:hover{color:var(--accent);gap:.9em}
.on-ink .tlink{border-bottom-color:var(--accent-hot)}
.on-ink .tlink:hover{color:var(--accent-hot)}
.tlink .arw{transition:transform var(--fast)}
.tlink:hover .arw{transform:translateX(3px)}

.badge{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;
  border:1px solid currentColor;line-height:1;white-space:nowrap}
.badge--fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.badge--accent{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.badge--muted{color:var(--dim);border-color:var(--hair)}
.band--ink .badge--muted{color:var(--dim-cream);border-color:rgba(246,241,233,.28)}

/* ---- marks ----------------------------------------------------------- */
/* ---- the 14 degree tilt --------------------------------------------------
   Every round seal sits 14 degrees clockwise — near enough arctan(1/4), the
   same angle the original band was built on, so it stays the one non-orthogonal
   angle in the system. Circles rotate for free: the bounding box is unchanged,
   so nothing clips and nothing reflows. */
.seal,.knockout img{transform:rotate(14deg)}
@media (prefers-reduced-motion:no-preference){
  .seal{transition:transform var(--slow)}
}
.seal .ring{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.28em;
  fill:var(--ink)}
.seal .cup{font-family:var(--sans);font-weight:900;font-stretch:88%;font-size:19px;
  letter-spacing:.02em;fill:var(--paper)}
.lineage{color:var(--paper)}
.lineage .ring{fill:currentColor}
.mono-mark .cup{font-family:var(--sans);font-weight:900;font-stretch:80%;letter-spacing:-.02em}
/* knockout on Roast — Ben's favourite treatment */
.knockout{background:var(--deep);padding:var(--s5);width:186px;display:flex}
.knockout img{width:100%;height:auto;display:block}
.knockout .seal .ring{fill:var(--paper)}
.knockout .seal .cup{fill:var(--accent)}

/* ---- masthead -------------------------------------------------------- */
.masthead{border-bottom:var(--rule)}
.mast-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding-block:10px;border-bottom:var(--rule-soft);flex-wrap:wrap}
.mast-main{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);
  padding-block:var(--s4);flex-wrap:wrap}
/* The masthead lockup is the real artwork. The MARKETING · MEDIA · VENTURES
   descriptor lives in the top strip instead of inside the mark, which lets the
   logo itself run larger. Height is fixed; width follows the viewBox. */
.wordmark{display:flex;align-items:center}
.wordmark img{height:clamp(46px,5.4vw,66px);width:auto;display:block}
nav.mainnav ul{display:flex;flex-wrap:wrap;gap:var(--s5)}
nav.mainnav a{font-family:var(--mono);font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding-bottom:2px;border-bottom:2px solid transparent;
  transition:border-color var(--fast),color var(--fast)}
nav.mainnav a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* ---- hero ------------------------------------------------------------ */
.hero{padding-block:clamp(40px,5vw,80px)}
/* The hero headline is a headline, not a poster. The full mega scale is
   correct for a one-line statement and wrong for two — at 15.5rem a second
   line pushes the lede and the buttons below the fold, which is the one thing
   a hero may not do. Section heads keep the full scale. */
/* The hero headline is the one sentence-case exception in the system. The
   mega face is drawn for caps — .8 line-height and -.045em tracking only work
   when there are no descenders and every letter is the same height. Lowercase
   needs all three loosened together or the 'y' in "ways" lands on line two.
   Size comes up slightly because lowercase x-height reads smaller than
   cap-height at the same point size. Section heads stay uppercase. */
.hero .mega{font-size:clamp(2.7rem,9vw,9.8rem);text-transform:none;
  line-height:.92;letter-spacing:-.03em}
.hero .lede{margin-top:0}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:var(--s7);align-items:start}
.hero .seal{width:clamp(230px,27vw,420px);height:auto;flex:none}  /* doubled — the mark is the brand's loudest asset and it was
     whispering. The headline scale came down to pay for the room. */
img.seal{display:block}
.hero-foot{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);align-items:center;
  margin-top:var(--s7);padding-top:var(--s5);border-top:var(--rule-mid)}

/* ---- ticker: the one moving element ---------------------------------- */
.ticker{border-block:var(--rule);background:var(--ink);color:var(--paper);overflow:hidden}
.ticker ul{display:flex;gap:var(--s8);padding-block:11px;white-space:nowrap;
  animation:slide 42s linear infinite;will-change:transform}
.ticker li{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;display:flex;align-items:center;gap:var(--s4)}
.ticker li::before{content:"";width:6px;height:6px;background:var(--accent-hot);flex:none}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker ul{animation:none}}

/* ---- index rows (services, ventures) --------------------------------- */
.index{border-top:var(--rule)}
.irow{display:grid;grid-template-columns:64px minmax(0,1.15fr) minmax(0,1.5fr) 150px;
  gap:var(--s5);align-items:baseline;padding-block:var(--s5);border-bottom:var(--rule-soft);
  transition:background var(--fast),padding-inline var(--fast)}
.irow:hover{background:var(--crema);padding-inline:var(--s3)}
.band--ink .irow:hover{background:rgba(246,241,233,.06)}
.band--ink .irow{border-bottom-color:rgba(246,241,233,.28)}
.irow .n{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;color:var(--accent)}
.band--ink .irow .n{color:var(--accent-hot)}
.irow .t{font-family:var(--sans);font-weight:800;font-stretch:84%;font-size:var(--t-l);
  letter-spacing:-.03em;line-height:.95;text-transform:uppercase}
.irow .d{color:var(--dim);font-size:var(--t-sm);line-height:1.45}
.band--ink .irow .d{color:var(--dim-cream)}
.irow .s{justify-self:end}

/* ---- stat cells ------------------------------------------------------ */
.stat .v{font-family:var(--sans);font-weight:900;font-stretch:76%;font-size:var(--t-xxl);
  line-height:.8;letter-spacing:-.045em;margin-block:var(--s3) var(--s3)}
.stat .v.hot{color:var(--accent)}
.band--ink .stat .v.hot{color:var(--accent-hot)}
.tbc{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);border:1px solid currentColor;padding:2px 5px;margin-left:6px;
  vertical-align:middle;white-space:nowrap}
.band--ink .tbc{color:var(--accent-hot)}

/* ---- plates ---------------------------------------------------------- */
.plate{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.plate::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:radial-gradient(circle at center,rgba(246,241,233,.95) .62px,transparent .68px);
  background-size:4px 4px;opacity:.4}
.plate .flag{position:absolute;z-index:5;left:0;top:0;background:var(--accent);color:var(--paper);
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;padding:7px 11px}
.plate .reg{position:absolute;z-index:4;width:13px;height:13px;opacity:.5;color:var(--paper)}
.plate .reg--tl{top:9px;right:9px} .plate .reg--br{bottom:9px;right:9px}
.ratio-4x3{aspect-ratio:4/3} .ratio-1x1{aspect-ratio:1/1} .ratio-3x4{aspect-ratio:3/4}
/* duotone mid-tones remixed from Espresso + Steam, per the kit's note */
.pl-a{background:
  radial-gradient(circle 52px at 73% 27%,var(--accent-hot) 0 100%,transparent 0),
  radial-gradient(32% 50% at 43% 116%,#613C37 0 62%,transparent 63%),
  linear-gradient(198deg,#3F2521 0 30%,transparent 30%),
  radial-gradient(80% 74% at 10% 118%,var(--accent) 0 50%,transparent 51%),
  linear-gradient(180deg,#010101 0 58%,#2A1614 58%),var(--ink)}
.pl-b{background:
  linear-gradient(0deg,var(--accent) 0 22%,transparent 22%),
  radial-gradient(38% 44% at 32% 44%,#613C37 0 62%,transparent 63%),
  radial-gradient(circle 40px at 84% 68%,var(--accent-hot) 0 100%,transparent 0),
  linear-gradient(180deg,#010101 0 52%,#2A1614 52%),var(--ink)}
.pl-c{background:
  conic-gradient(from 214deg at 62% 34%,var(--accent) 0 42deg,transparent 42deg 360deg),
  linear-gradient(112deg,var(--ink) 0 46%,#64302A 46% 74%,var(--ink) 74%),var(--ink)}
.pl-d{background:
  radial-gradient(48% 62% at 50% 96%,var(--accent-hot) 0 52%,transparent 53%),
  linear-gradient(180deg,#613C37 0 40%,var(--ink) 40%),var(--ink)}

/* ---- pull quote in the credential voice ------------------------------ */
.quote .q{font-family:var(--mono);font-weight:400;letter-spacing:.01em;max-width:24ch;
  font-size:clamp(1.05rem,1.85vw,1.5rem);line-height:1.4;text-transform:none}
.quote .attr{margin-top:var(--s5);padding-top:var(--s3);border-top:var(--rule-cream);
  max-width:24ch}

/* ---- footer ---------------------------------------------------------- */
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);align-items:start}
.foot-grid h3{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s4)}
.foot-grid li{margin-bottom:8px;font-size:var(--t-sm)}
.attribution{display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase}

/* ---- the enquiry form ------------------------------------------------
   Square, ruled, mono-labelled. Inputs are underlines rather than boxes so
   the form reads as part of the broadsheet grid instead of a widget dropped
   onto it. Focus is the accent, never a browser default halo. */
.cgform{margin-top:var(--s6)}
.cg-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.f-grid{display:grid;gap:var(--s5) var(--s6)}
@media(min-width:760px){.f-grid{grid-template-columns:repeat(2,1fr)}
  .f--wide{grid-column:1/-1}}
.f{margin:0;display:flex;flex-direction:column;gap:10px}
.f label{font-family:var(--mono);font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);line-height:1.3}
.f-opt{font-weight:400;letter-spacing:.13em;opacity:.7;text-transform:none}
.f input,.f select,.f textarea{
  font-family:var(--sans);font-size:1rem;line-height:1.45;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--ink);
  border-radius:0;padding:10px 2px;width:100%;appearance:none;
  transition:border-color var(--fast),background var(--fast)}
.f textarea{resize:vertical;min-height:5.2em}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 13px) 55%,calc(100% - 8px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
.f input::placeholder,.f textarea::placeholder{color:var(--dim);opacity:.62}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0;border-bottom-color:var(--accent);background:var(--crema)}
.f--bad input,.f--bad textarea{border-bottom-color:var(--accent);border-bottom-width:2px}
.f-err{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.04em;color:var(--accent);
  margin:0;text-transform:none}
.f-top{font-family:var(--mono);font-size:var(--t-sm);border-left:3px solid var(--accent);
  padding:var(--s3) var(--s4);background:var(--paper-2);max-width:62ch;margin-bottom:var(--s5)}
.f-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s6);
  margin-top:var(--s6);padding-top:var(--s5);border-top:var(--rule-mid)}
.sent{border-left:3px solid var(--accent);padding:var(--s5) var(--s6);background:var(--paper-2)}

/* On an inverted band the underlines and the accent both have to flip. */
.band--ink .f label{color:var(--dim-cream)}
.band--ink .f input,.band--ink .f select,.band--ink .f textarea{
  color:var(--paper);border-bottom-color:rgba(246,241,233,.5)}
.band--ink .f input:focus,.band--ink .f select:focus,.band--ink .f textarea:focus{
  border-bottom-color:var(--accent-hot);background:rgba(246,241,233,.06)}
.band--ink .f-err,.band--ink .f--bad input,.band--ink .f--bad textarea{color:var(--accent-hot);
  border-bottom-color:var(--accent-hot)}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero .seal{order:-1;margin-bottom:var(--s5);width:min(56vw,300px)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .g4,.g3{grid-template-columns:repeat(2,1fr)}
  .irow{grid-template-columns:44px 1fr;gap:var(--s3) var(--s4)}
  .irow .d{grid-column:2} .irow .s{grid-column:2;justify-self:start}
}
@media (max-width:620px){
  .g4,.g3,.g2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn--big{padding:16px 22px}
  nav.mainnav ul{gap:var(--s4)}
}

/* ==========================================================================
   CLIENT PAGES — /work/*
   The "Powered by Caffeine Group" landing pages.
   ========================================================================== */

/* The triage bar. Sits above everything. Its whole job is to get a confused
   visitor of the CLIENT's site back to the client's site in one click.
   Most people who click a footer credit are their visitors, not our prospects. */
.triage{background:var(--ink);color:var(--paper);border-bottom:1px solid var(--ink)}
.triage .inner{max-width:var(--max);margin:0 auto;padding:12px var(--gut);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;
  justify-content:space-between}
.triage p{margin:0;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim-cream)}
.triage a{display:inline-flex;align-items:center;gap:.6em;font-family:var(--mono);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);border-bottom:2px solid var(--accent-hot);padding-bottom:2px;
  transition:color var(--fast),gap var(--fast)}
.triage a:hover{color:var(--accent-hot);gap:.95em}

/* Two support doors — the client's business vs. this website */
.doors .cell{padding:var(--s6);display:flex;flex-direction:column}
.doors .cell p{font-size:var(--t-sm);color:var(--dim);margin-bottom:var(--s5)}
.doors .cell .btn{margin-top:auto;align-self:flex-start}

/* Case study body */
.study{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s8)}
.study .body p{max-width:64ch}
.study .side{border-left:var(--rule);padding-left:var(--s6)}
.study .side dl{margin:0}
.study .side dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.study .side dd{margin:0 0 var(--s5);font-size:var(--t-sm);line-height:1.45}
.study .side dd:last-child{margin-bottom:0}

/* Relationship strip — cells block, client variant */
.rel .cell .yr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:block;margin-top:var(--s3)}
.rel .cell h3{font-family:var(--sans);font-weight:800;font-stretch:84%;
  font-size:var(--t-l);letter-spacing:-.03em;line-height:.95;text-transform:uppercase;
  margin-top:var(--s3)}

@media (max-width:900px){
  .study{grid-template-columns:1fr;gap:var(--s6)}
  .study .side{border-left:0;border-top:var(--rule);padding-left:0;padding-top:var(--s5)}
}