/* ==========================================================================
   Mosaic Medicine, Male Hormone Optimization
   Redesign 3, "The Mosaic"

   Elementor-native build. Every value in :root becomes a Global Color or
   Global Font in Site Settings; everything below it belongs in the single
   Site Settings > Custom CSS block. No JavaScript anywhere on this page.

   The system: unequal rectangular tiles, butted together with a 4px grout
   gap of the page ground showing between them. Zero radius, no shadows.
   The clinic is named for a mosaic and its logo is a cross of blue tiles.
   ========================================================================== */

:root{
  /* Glazed ceramic. The logo's blue opened into a tile range. */
  --grout:#EDF1F4;   /* page ground, the grout between tiles */
  --white:#FFFFFF;   /* reading tiles and the form */
  --navy:#0B2440;    /* ink, and the dark tiles */
  --deep:#12496F;
  --azure:#106BB3;   /* the client's own logo blue. primary action */
  --azure-lift:#0E5C9B;
  --teal:#276E7A;
  --pale:#C3DAEA;
  --tile:#3D95DA;    /* the panel's tiles. 4.86:1 on navy */
  --ochre:#D99A2B;   /* the one warm tile. never a button */

  --ink:#0B2440;
  --ink-soft:#46566B;        /* 6.6:1 on grout */
  --on-navy:rgba(255,255,255,.82);
  --field-line:#6E8CA6;      /* 3.5:1 on white, so a field has a real edge */
  --field-fill:#F4F8FB;

  --gap:4px;                 /* the grout line. the signature. */
  --wrap:1280px;
  --bleed:24px;

  --display:'Gabarito',system-ui,-apple-system,sans-serif;
  --text:'Golos Text',system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------- base -- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--grout);
  color:var(--ink);
  font-family:var(--text);
  font-size:16.5px;
  line-height:1.7;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;height:auto;display:block}

a{color:var(--azure);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--navy)}

::selection{background:var(--azure);color:#fff}

:focus-visible{
  outline:3px solid var(--azure);
  outline-offset:2px;
}
.dark :focus-visible,.tile--navy :focus-visible,.tile--azure :focus-visible,
.tile--teal :focus-visible,.tile--deep :focus-visible{
  outline-color:#fff;
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ------------------------------------------------------------- measure -- */

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--bleed)}

/* Sections are separated by the grout, not by rules. */
.sect{padding-block:clamp(56px,7vw,104px)}
.sect--tight{padding-block:clamp(40px,4.5vw,64px)}

/* ---------------------------------------------------------------- type -- */

.h1{
  font-size:clamp(40px,6.2vw,76px);
  line-height:.98;
  letter-spacing:-.032em;
  font-weight:700;
}
.h2{
  font-size:clamp(29px,3.6vw,46px);
  line-height:1.04;
  letter-spacing:-.025em;
}
.h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:600}

.lede{
  font-size:clamp(17px,1.3vw,20px);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:52ch;
}
.prose{max-width:66ch;line-height:1.75}
.prose + .prose{margin-top:1.1em}

.fine{font-size:14px;line-height:1.55;color:var(--ink-soft)}
.tile--navy .fine,.tile--azure .fine,.tile--teal .fine,.tile--deep .fine{color:var(--on-navy)}

/* ------------------------------------------------------------- buttons -- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:17px;line-height:1.15;
  padding:16px 26px;   /* 1.15 not 1, so the y and g in "Book your hormone
                          evaluation" cannot clip against the flex baseline */
  border:2px solid transparent;
  border-radius:0;                     /* tiles have no radius, nor do buttons */
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn--go{background:var(--azure);color:#fff;border-color:var(--azure)}
.btn--go:hover{background:var(--azure-lift);border-color:var(--azure-lift);color:#fff}

.btn--line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--line:hover{background:var(--navy);color:#fff}

.btn--onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--onnavy:hover{background:#fff;color:var(--navy);border-color:#fff}

.btn--wide{width:100%}

.acts{display:flex;flex-wrap:wrap;gap:var(--gap)}

/* ================================================================= TILES ==
   The whole page is built from these. In Elementor each tile is a
   container with a background colour and 28 to 36px padding; the grout
   gap is the grid gap on the parent.
   ========================================================================= */

.mos{display:grid;gap:var(--gap)}

.tile{padding:clamp(22px,2.4vw,34px);min-width:0}
.tile--white{background:var(--white)}
.tile--navy{background:var(--navy);color:#fff}
.tile--deep{background:var(--deep);color:#fff}
.tile--azure{background:var(--azure);color:#fff}
.tile--teal{background:var(--teal);color:#fff}
.tile--pale{background:var(--pale);color:var(--navy)}
.tile--ochre{background:var(--ochre);color:var(--navy)}
.tile--flat{padding:0;background:none}

.tile--navy .h2,.tile--navy .h3,.tile--deep .h3,
.tile--azure .h3,.tile--teal .h3,.tile--azure .h2{color:#fff}
.tile--navy p,.tile--deep p,.tile--azure p,.tile--teal p{color:var(--on-navy)}

/* A tile's small identifying word. Sentence case, never tracked caps. */
.tag{
  font-family:var(--display);font-weight:600;font-size:14px;line-height:1.25;
  color:var(--azure);
  display:block;margin-bottom:12px;
}
.tile--navy .tag,.tile--deep .tag{color:#8EC2EC}
.tile--azure .tag,.tile--teal .tag{color:rgba(255,255,255,.8)}
.tile--ochre .tag{color:#3D2A04}

/* Photo tiles carry the studio's labelling rule. */
.shot{position:relative;background:var(--pale);overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover}
.shot--43{aspect-ratio:4/3}
.shot__tag{
  position:absolute;left:0;bottom:0;
  background:var(--navy);color:#fff;
  font-family:var(--display);font-size:12.5px;font-weight:500;line-height:1.3;
  padding:8px 12px;
}
.shot--empty{
  display:grid;place-items:center;
  background:var(--pale);
  color:#2B4E6B;font-family:var(--display);font-size:14px;font-weight:500;
  text-align:center;padding:20px;
}

/* ------------------------------------------------------------- the gate -- */
/* Unverified facts. Deleted at launch. */
.gate{
  border-bottom:2px dotted var(--gate-line,var(--ochre));
  color:var(--gate-ink,#7A5406);      /* 6.0:1 on grout, 6.8:1 on white */
  font-style:normal;
}
/* Any dark ground redeclares the pair once and every gate inside it
   inherits. Enumerating gate selectors instead let two slip through. */
.tile--navy,.tile--deep,.tile--azure,.tile--teal,
.band--navy,.band--deep,.panel,.footer,.steps > li,.who__quote{
  --gate-ink:#F4C669;                 /* 9.8:1 on navy, 6.4:1 on deep */
  --gate-line:#F4C669;
}

/* ================================================================ HEADER ==
   Theme Builder template. Sticky navy rule.
   ========================================================================= */

.header{
  position:sticky;top:0;z-index:40;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.header__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--bleed);
  height:78px;display:flex;align-items:center;gap:28px;
}
.header__logo{margin-right:auto;display:flex;align-items:center}
.header__logo img{height:46px;width:auto}

.nav{display:flex;gap:26px;align-items:center}
.nav a{
  color:#fff;font-family:var(--text);font-weight:500;font-size:15px;
  text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:rgba(255,255,255,.6);color:#fff}
.nav a[aria-current="page"]{border-bottom-color:var(--azure);color:#fff}

.header__tel{
  color:#fff;font-family:var(--display);font-weight:600;font-size:16px;
  text-decoration:none;white-space:nowrap;
}
.header__tel:hover{color:#8EC2EC}
.header .btn{padding:12px 18px;font-size:15px}

.header__menu{display:none}

/* CSS-only mobile nav. Elementor's Nav Menu hamburger does this natively. */
@media (max-width:1000px){
  .nav,.header__tel{display:none}
  .header__menu{display:block}
  .header__menu summary{
    list-style:none;cursor:pointer;
    color:#fff;font-family:var(--display);font-weight:600;font-size:15px;
    border:2px solid rgba(255,255,255,.5);padding:11px 16px;
  }
  .header__menu summary::-webkit-details-marker{display:none}
  .header__panel{
    position:absolute;left:0;right:0;top:100%;
    background:var(--navy);border-top:1px solid rgba(255,255,255,.14);
    padding:8px var(--bleed) 20px;
    display:grid;
  }
  .header__panel a{
    color:#fff;text-decoration:none;font-size:17px;padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .header__panel .btn{margin-top:16px}
}

/* =============================================================== CRUMBS == */

.crumbs{
  font-size:14px;color:var(--ink-soft);
  padding-block:20px 0;
}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--azure)}
.crumbs span{color:var(--navy);font-weight:500}
.crumbs i{font-style:normal;color:var(--ink-soft);padding:0 8px}

/* ================================================================== HERO ==
   A mosaic composition. The form is a white tile, 5 of 12 columns, on a
   light ground, at full height beside the headline. It is the largest
   single object in the hero on purpose.
   ========================================================================= */

.hero{
  padding-top:clamp(28px,3vw,44px);
  padding-bottom:clamp(48px,6vw,88px);
}
.hero__grid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(12,1fr);
  align-items:stretch;
}
/* Two independent columns. Neither dictates the other's height: the slack
   lands in the photo crop and the navy tile, which absorb it invisibly.
   It must never land in the form, which is what opened a 153px hole
   between the submit button and the legal note. */
/* The 4px grout belongs BETWEEN tiles of one composition. The hero's two
   halves are different things, the argument and the action, so they get a
   real gutter: at 4px the photograph ran hard against the white form. */
.hero__left{
  grid-column:1 / span 7;display:flex;flex-direction:column;gap:var(--gap);
  padding-right:clamp(14px,2.1vw,30px);
}
.hero__right{grid-column:8 / span 5;display:flex;flex-direction:column;gap:var(--gap)}

.hero__say{padding:clamp(8px,1.6vw,24px) 0 clamp(24px,3vw,40px) 0}
.hero__say .lede{margin-top:22px;max-width:46ch}
.hero__say .acts{margin-top:30px}

@media (min-width:1061px){
  .hero__photo{aspect-ratio:auto;flex:1 1 auto;min-height:240px}
  .hero__note{flex:1 1 auto}
}

.hero__note ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.hero__note li{font-size:14.5px;line-height:1.5;color:var(--on-navy)}
.hero__note b{color:#fff;font-weight:600}

.progmark{
  display:flex;align-items:center;gap:14px;
  margin-top:26px;
}
/* The men's health lockup is navy artwork, so its mount is white, never navy. */
.progmark span{background:var(--white);padding:10px 14px;display:inline-flex}
.progmark img{height:34px;width:auto}
.progmark small{font-size:13.5px;color:var(--ink-soft);line-height:1.4}

/* ---------------------------------------------------------- the booking -- */
/* This block is the style spec for the Elementor Form widget. */

.book{background:var(--white);padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column}
.book__head{margin-bottom:22px}
.book__head .h3{font-size:25px;letter-spacing:-.02em}
.book__head p{margin-top:8px;font-size:14.5px;color:var(--ink-soft);line-height:1.5}

.field{display:grid;gap:7px;margin-bottom:16px}
.field label{
  font-family:var(--display);font-weight:600;font-size:14px;color:var(--navy);
}
.field input,.field select{
  font-family:var(--text);font-size:16.5px;color:var(--ink);
  background:var(--field-fill);
  border:1.5px solid var(--field-line);   /* 3.5:1 against the white tile */
  border-radius:0;
  padding:14px 14px;
  width:100%;
  min-height:52px;
}
.field input::placeholder{color:#5C6B80}
.field input:focus-visible,.field select:focus-visible{
  outline:3px solid var(--azure);outline-offset:1px;border-color:var(--azure);
}
.book .btn{margin-top:6px}
.book__note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* ================================================================ PANEL ==
   The argument, drawn. Two fields of the same size: 300 tiles you can
   count, and 3,000+ you cannot. Pure CSS, no script, no image.
   ========================================================================= */

.panel{background:var(--navy);color:#fff}
.panel__grid{
  display:grid;gap:clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
}
.panel__say{grid-column:1 / -1;margin-bottom:clamp(20px,3vw,36px)}
.panel__say .h2{color:#fff}
.panel__say p{color:var(--on-navy);font-size:17px}

/* A section opener runs the full measure: statement left, the thing it
   qualifies right. No half-empty gutter. */
.lead{
  display:grid;gap:clamp(18px,3.4vw,60px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:end;
}
@media (max-width:820px){.lead{grid-template-columns:1fr;gap:16px;align-items:start}}

/* Fields align at the top, or the two are not comparable. */
.count{display:grid;gap:14px;grid-template-rows:auto auto 1fr}
.count__n{
  font-family:var(--display);font-weight:700;
  font-size:clamp(46px,8.4vw,104px);
  line-height:.86;letter-spacing:-.04em;
  color:#fff;
}
.count--them .count__n{color:#7E9DC2}
.count__cap{font-size:15px;line-height:1.5;color:var(--on-navy);max-width:34ch}
.count--them .count__cap{color:#9FB6D0}

/* The tile field. --c columns, --r rows, --g of the navy ground as grout.
   Both fields are the SAME colour and the SAME size, so tile count is the
   only variable. The dense field recedes on its own because grout takes a
   larger share of its area (4.39:1 sparse, 3.89:1 dense, per tile 4.86:1). */
.field-tiles{
  --g:1.5px;
  aspect-ratio:4/3;width:100%;
  background-color:var(--tile);
  background-image:
    repeating-linear-gradient(to right,
      transparent 0 calc((100% / var(--c)) - var(--g)),
      var(--navy) calc((100% / var(--c)) - var(--g)) calc(100% / var(--c))),
    repeating-linear-gradient(to bottom,
      transparent 0 calc((100% / var(--r)) - var(--g)),
      var(--navy) calc((100% / var(--r)) - var(--g)) calc(100% / var(--r)));
}
.field-tiles--dense{--g:1px}

.panel__foot{
  margin-top:clamp(28px,3.5vw,48px);
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.2);
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;
}
.panel__foot p{color:var(--on-navy);font-size:14.5px;max-width:64ch;line-height:1.6}

/* ================================================================== HOW ==
   A reading tile, then the five commitments as an unequal composition.
   ========================================================================= */

.how__say{margin-bottom:clamp(24px,3vw,40px)}
.how__say p{color:var(--ink-soft);font-size:17px;line-height:1.7}

.how__grid{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(6,1fr);
}
.how__fee   {grid-column:span 4}
.how__first {grid-column:span 2;grid-row:span 2}
.how__after {grid-column:span 2}
.how__labs  {grid-column:span 2}
.how__on    {grid-column:span 6}

.how__grid .h3{margin-bottom:10px}
.how__grid p{font-size:15.5px;line-height:1.65}

.how__on{display:grid;gap:8px 40px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.how__on .btn{align-self:center}

@media (max-width:900px){
  .how__grid{grid-template-columns:repeat(2,1fr)}
  .how__fee,.how__first,.how__after,.how__labs,.how__on{grid-column:span 2;grid-row:auto}
  .how__on{grid-template-columns:1fr}
}

/* ================================================================ BANDS == */

.band{padding-block:clamp(56px,7vw,104px)}
.band--navy{background:var(--navy);color:#fff}
.band--deep{background:var(--deep);color:#fff}
.band--pale{background:var(--pale)}
.band--navy .h2,.band--deep .h2{color:#fff}
.band--navy .lead p,.band--deep .lead p{color:var(--on-navy)}
.band--pale .lead p{color:#334A61}

/* ========================================================== HORMONES ==
   Seven tiles. The clinic's own metaphor: the picture is assembled from
   distinct pieces, so the hormone set is literally set as tesserae.
   ========================================================================= */

.hormones{display:grid;gap:var(--gap);grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.hormones li{list-style:none;padding:22px 20px;background:var(--white)}
.hormones li:nth-child(4n+2){background:var(--pale)}
.hormones li:nth-child(7){background:var(--ochre)}
.hormones b{display:block;font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:5px}
.hormones span{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.hormones li:nth-child(7) span{color:#3D2A04}
@media (max-width:860px){.hormones{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.hormones{grid-template-columns:1fr}}

/* ========================================================== SYMPTOMS ==
   Not tiles and not a checklist: a plain two-column reading list set
   large, so the section has a different rhythm from its neighbours.
   ========================================================================= */

.syms{columns:2;column-gap:56px;margin:0;padding:0;list-style:none}
.syms li{
  break-inside:avoid;
  font-family:var(--display);font-weight:500;
  font-size:clamp(19px,1.7vw,24px);line-height:1.3;
  padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.syms li::before{content:"";display:inline-block;width:11px;height:11px;background:var(--tile);margin-right:14px}
@media (max-width:720px){.syms{columns:1}}

/* =========================================================== DECLINE ==
   The page's own "1 to 2% per year" figure, compounded, drawn in tiles.
   Arithmetic only, stated as such in the caption. No script.
   ========================================================================= */

.decline{background:var(--white);padding:clamp(24px,3vw,38px)}
/* Proportional, not fixed-pitch: the bar is n/20 of its column and its
   grout pitch is 100%/n, so the tile count stays exact at every width and
   the row can never overflow. A fixed pitch pushed 2px off a 390px screen. */
.decline__row{
  display:grid;grid-template-columns:46px minmax(0,1fr) 46px;
  gap:16px;align-items:center;padding:11px 0;
  border-top:1px solid var(--pale);
}
.decline__row:first-of-type{border-top:0}
.decline__age{font-family:var(--display);font-weight:700;font-size:21px}
.decline__bar{
  height:clamp(15px,2.1vw,26px);
  width:calc(var(--n) / 20 * 100%);
  background-color:var(--tile);          /* 3.2:1 on white */
  background-image:repeating-linear-gradient(to right,
    transparent 0 calc(100% / var(--n) - 2px),
    var(--white) calc(100% / var(--n) - 2px) calc(100% / var(--n)));
}
.decline__pct{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-soft);text-align:right}
.decline figcaption{margin-top:20px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);max-width:74ch}

/* ============================================================= STEPS ==
   A sequence, so it is ordered. The chip count grows one tile per step:
   the mosaic being assembled, which is the clinic's own figure of speech.
   ========================================================================= */

.steps{display:grid;gap:var(--gap);grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none}
.steps > li{list-style:none;background:var(--deep);padding:26px 24px}
.steps .tag{color:#9ECBF2}
.chips{display:flex;gap:3px;margin-bottom:16px}
.chips i{width:10px;height:10px;background:var(--tile);display:block}
.chips i:nth-child(n+2){opacity:.55}
.steps h3{font-size:18px;margin-bottom:9px;color:#fff}
.steps p{font-size:14.5px;line-height:1.6;color:var(--on-navy)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* =============================================================== WHO == */

.who{display:grid;gap:var(--gap);grid-template-columns:4fr 5fr 3fr}
.who__bio{background:var(--white);padding:clamp(24px,2.4vw,32px)}
.who__bio h3{font-size:23px;margin-bottom:6px}
.who__role{font-family:var(--display);font-weight:600;font-size:15px;color:var(--azure);margin-bottom:14px}
.who__bio p{font-size:15.5px;line-height:1.65;margin-bottom:14px}
.who__quote{background:var(--navy);color:#fff;padding:clamp(24px,2.4vw,32px);display:flex;flex-direction:column}
.who__quote blockquote{margin:0;font-family:var(--display);font-weight:500;font-size:18px;line-height:1.45}
.who__quote cite{margin-top:16px;font-style:normal;font-size:13.5px;color:var(--on-navy)}
.shot--45{aspect-ratio:4/5}
@media (max-width:980px){
  .who{grid-template-columns:1fr 1fr}
  .who__quote{grid-column:1 / -1}
}
@media (max-width:560px){.who{grid-template-columns:1fr}}

/* =========================================================== REVIEWS == */

.reviews{background:var(--white);padding:clamp(28px,3vw,40px);text-align:center}
.reviews p{color:var(--ink-soft);font-size:15px}

/* =============================================================== FAQ ==
   Native <details>. Elementor's Accordion widget renders the same thing.
   ========================================================================= */

.faq{max-width:82ch}
.faq details{background:var(--white);margin-bottom:var(--gap)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;gap:20px;align-items:flex-start;justify-content:space-between;
  font-family:var(--display);font-weight:600;font-size:18.5px;line-height:1.35;
  padding:22px 24px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--azure)}
.faq summary::after{
  content:"";flex:0 0 auto;width:14px;height:14px;margin-top:5px;
  background:var(--azure);
  clip-path:polygon(43% 0,57% 0,57% 43%,100% 43%,100% 57%,57% 57%,57% 100%,43% 100%,43% 57%,0 57%,0 43%,43% 43%);
  transition:transform .2s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > p{padding:0 24px 24px;max-width:70ch;line-height:1.7}

/* ============================================================= LINKS == */

.links{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr}
.links > div{background:var(--white);padding:clamp(24px,2.4vw,32px)}
.links h3{font-size:19px;margin-bottom:16px}
.links ul{list-style:none;margin:0;padding:0}
.links li{border-top:1px solid var(--pale);padding:13px 0}
.links li:first-child{border-top:0}
.links a{font-family:var(--display);font-weight:600;font-size:16.5px;text-decoration:none;display:block}
.links a:hover{text-decoration:underline}
.links small{display:block;font-family:var(--text);font-weight:400;font-size:14px;color:var(--ink-soft);line-height:1.45;margin-top:3px}
@media (max-width:820px){.links{grid-template-columns:1fr}}

/* =========================================================== CLOSING == */

.closing{display:grid;gap:clamp(28px,4vw,64px);grid-template-columns:1.25fr .75fr;align-items:start}
.closing .h2{font-size:clamp(31px,4vw,52px)}
.closing p{color:var(--on-navy);margin-top:20px;max-width:58ch}
.closing .acts{margin-top:32px}
.closing__at{border-left:2px solid var(--ochre);padding-left:24px;display:grid;gap:12px;font-size:15px;color:var(--on-navy);line-height:1.5}
.closing__at b{color:#fff;font-family:var(--display);font-size:17px}
.closing__at a{color:#fff}
@media (max-width:820px){.closing{grid-template-columns:1fr}}

/* ================================================================ FOOTER == */

.footer{background:var(--navy);color:#fff;padding-block:clamp(44px,5vw,68px) 0}
.footer__grid{
  display:grid;gap:36px 40px;
  grid-template-columns:1.5fr .9fr 1.2fr 1fr;
}
.footer h3{font-family:var(--display);font-size:15px;font-weight:600;color:#8EC2EC;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a{color:#fff;text-decoration:none;font-size:15px;line-height:1.45}
.footer a:hover{color:#8EC2EC;text-decoration:underline}
.footer__logo img{height:52px;width:auto;margin-bottom:20px}
.footer__contact{display:grid;gap:11px;font-size:15px;color:var(--on-navy);line-height:1.5}
.footer__contact a{color:var(--on-navy)}
.footer__end{
  margin-top:clamp(36px,4vw,56px);
  border-top:1px solid rgba(255,255,255,.18);
  padding-block:22px;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  font-size:13.5px;color:rgba(255,255,255,.66);
}

@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer__grid{grid-template-columns:1fr}}

/* ========================================================== RESPONSIVE ==
   1000px: the hero form drops under the headline but stays above the
   photo, because it is the point of the page.
   ========================================================================= */

/* The wrappers dissolve so the form can be ordered straight under the
   headline rather than below the photograph. */
@media (max-width:1060px){
  .hero__grid{grid-template-columns:repeat(6,1fr)}
  .hero__left,.hero__right{display:contents}
  .hero__say {grid-column:1 / -1;order:1;padding-right:0}
  .hero__form{grid-column:1 / -1;order:2}
  .hero__photo{grid-column:1 / span 3;order:3}
  .hero__note {grid-column:4 / span 3;order:4}
}

@media (max-width:820px){
  .panel__grid{grid-template-columns:1fr;gap:32px}
  .panel__foot{flex-direction:column;align-items:flex-start}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero__photo,.hero__note{grid-column:1 / -1}
  .acts{flex-direction:column;align-items:stretch}
  .acts .btn{width:100%}
  .header__in{height:66px}
  .header__logo img{height:38px}
}

/* ===================================================== PRE-PUBLISH ====== */

.revs{
  max-width:var(--wrap);margin:0 auto;padding:36px var(--bleed) 64px;
  border-top:2px dotted var(--ochre);
}
.revs h2{font-size:22px;margin-bottom:6px}
.revs p{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px}
.revs ol{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14.5px;line-height:1.6}
#present:checked ~ main .gate{border-bottom:0;color:inherit}
#present:checked ~ .revs{display:none}
.presentbar{
  max-width:var(--wrap);margin:0 auto;padding:12px var(--bleed) 0;
  font-size:13.5px;color:var(--ink-soft);
}
.presentbar label{cursor:pointer;user-select:none}
#present{position:absolute;opacity:0;pointer-events:none}