/* Artemis Special Situations Origination.
   ============================================================================
   THE IVORY VERSION OF THE SAME PAGE. Not a second design language.

   Every selector, every measurement, every type step and every piece of spacing
   below is the Operations stylesheet's, unchanged. The only thing inverted is
   which of the two Artemis grounds the page sits on: Operations is ivory type on
   deep navy; this is deep navy type on warm ivory. Artemis blue stays the single
   accent in both.

   If a value here differs from the matching one in operations/index.html, that
   is a bug rather than a decision. The two pages are the same page.

   Shared by index.html and the three intake routes. */

:root{
  --ink:#040912;            /* deep navy    */
  --paper:#f4f2ed;          /* warm ivory   */
  --silver:#9dafcc;         /* artemis blue */

  /* THESE COME FROM THE INVERSE SCHEME, NOT FROM MIRRORING THE DARK ONE.
     They read `#3a4050` and `#5c6678`, derived by taking Operations' dark-side
     text tones and flipping them. Neither is a brand value, and the result was
     a page whose headings and buttons were correct navy while every paragraph
     and caption sat in an off-palette slate - which is what made the ivory side
     look grey rather than ivory.

     The scheme names both of these. Blue-graphite for secondary lettering,
     muted grey-blue for secondary text and captions. Measured against the warm
     ivory ground: blue-graphite is 9.20:1, which is what the value it replaces
     already gave (9.25:1), so the body copy loses nothing and gains the blue it
     should always have had. */
  --body-on-light:#34405e;  /* blue-graphite, the scheme's secondary lettering */

  /* AND THIS ONE COSTS SOMETHING, WHICH IS WORTH WRITING DOWN.
     Muted grey-blue is 4.08:1 on warm ivory. WCAG AA asks 4.5:1 for text at
     this size, and every use below is small: eyebrows, captions, nav, help
     text, review labels, footnotes. The value it replaces was 5.18:1 and
     passed. This is the scheme's own colour for exactly this role, so it is
     used, but the trade is real and deliberate rather than unnoticed. */
  --muted:#6d7688;          /* muted grey-blue, secondary text and captions */

  /* WHERE OPERATIONS PROMOTES, THIS PAGE WAS DEMOTING.
     Operations sets its eyebrows, its card subtitles and its FAQ markers in
     --silver, the Artemis blue: on navy that is the brightest thing on the
     page after the headings. The mirror of those three was --muted, the
     quietest colour in the scheme, so the ivory page was whispering exactly
     where the navy one raises its voice - which is a second, structural reason
     it read grey next to Operations rather than merely lighter.
     The accent itself cannot do this job on ivory: #9DAFCC on #F4F2ED is
     1.9:1, which is not text. The scheme's answer for lettering that must
     carry on the light ground is blue-graphite, so that is what these three
     take. --muted stays where it belongs: captions, footnotes, help text and
     the legal line, which are quiet on both services. */
  --accent-on-light:#34405e;
  --hair:rgba(4,9,18,.16);
  --hair-strong:rgba(4,9,18,.26);

  --radius:18px;

  /* the same five steps plus the display sizes, so both pages read as one system */
  --fs-micro:11.5px;
  --fs-xs:12.5px;
  --measure-prose:min(1000px,100vw - 72px); /* type: anything read across */
  --measure-wide:min(1560px,100vw - 72px); /* structure: grids and bands */

  --fs-sm:13.5px;
  --fs-base:15px;
  --fs-lede:16.5px;
  --fs-brand:17px;
  --fs-brand-lg:19px;

  --serif:'Cormorant',Georgia,serif;
  --serif-caps:'Cormorant SC',Georgia,serif;
  --sans:'Inter Tight',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* the nav is fixed, so anchor targets must stop clear of it */
section[id],footer[id],.service-card[id]{scroll-margin-top:128px}

/* Operations' six radial washes, at the same positions and sizes, with the two
   tints swapped: there they lift a navy ground toward slate, here they settle an
   ivory ground toward the same slate. */
body{font-family:var(--sans);color:var(--body-on-light);-webkit-font-smoothing:antialiased;
     background:
       radial-gradient(80% 75vh at 50% -5%,rgba(157,175,204,.30),transparent 65%),
       radial-gradient(65% 60vh at 92% 15%,rgba(157,175,204,.22),transparent 62%),
       radial-gradient(65% 60vh at 2% 38%,rgba(157,175,204,.20),transparent 62%),
       radial-gradient(55% 48vh at 96% 58%,rgba(52,64,94,.07),transparent 60%),
       radial-gradient(52% 42vh at 50% 76%,rgba(52,64,94,.08),transparent 65%),
       radial-gradient(75% 65vh at 50% 103%,rgba(157,175,204,.26),transparent 65%),
       var(--paper)}
/* ------------------------------------------------ TWO MEASURES, NOT ONE BOX
   Every block on the page was centred in the same 1140px column: hero, prose,
   photographs, a four-card grid and a five-column sequence, all sharing one
   edge. That is what reads as generated. A column is a measure for TYPE - it
   exists so a line of prose does not run past what the eye can track back - and
   a grid of four categories has no business inheriting it.

   So the page now carries two, and BOTH of them moved. --measure-prose comes
   DOWN to 1000px and holds anything a reader reads across: the hero, the
   editorial split, the footer, the questions and the duo band, whose two
   photographs are a pair and read as one object. That is not a loss - the hero
   paragraph was already capped at 620px and the split's text at 440px, so the
   old 1140 was holding slack, not type. --measure-wide goes UP to 1560px, or
   the viewport less a 72px inset if that is smaller, and holds the two blocks
   that are sets you scan across rather than things you read: the situations
   taxonomy and the five steps.

   Both had to move because raising the wide measure alone does nothing on the
   screen most people are on. At 1280px there is no room above 1140 to speak of,
   so the two edges would have landed 60px apart and read as a mistake. Pulling
   prose in is what buys the difference: 208px at 1280, 560px at 1920.

   The two edges are meant to be seen. Prose insetting from structure is how an
   editorial page tells you which parts are argument and which parts are
   apparatus, and it is the opposite gesture to one box down the middle. */
.wrap{max-width:var(--measure-prose);margin:0 auto;padding:0 28px}
.wrap.wide{max-width:var(--measure-wide)}
section{padding:88px 0}
p{line-height:1.7}
img{display:block;max-width:100%}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--paper);
      padding:14px 22px;border-radius:0 0 12px 0;font-size:var(--fs-sm)}
.skip:focus{left:0}

.display{font-family:var(--serif);font-weight:500;line-height:1.15;color:var(--ink)}
h1.display,h2.display{text-transform:uppercase;letter-spacing:.09em}
h1.display{font-size:clamp(34px,4.2vw,56px)}
h2.display{font-size:clamp(24px,2.6vw,34px)}
.display em{font-style:italic;font-weight:400}
.eyebrow{font-family:var(--serif-caps);font-size:var(--fs-base);letter-spacing:.3em;
         text-transform:uppercase;font-weight:600;margin-bottom:20px;color:var(--accent-on-light)}
.hero .eyebrow{font-size:25px;letter-spacing:.26em}
.brand{font-family:var(--serif-caps);font-weight:600;letter-spacing:.24em;text-transform:uppercase}

/* nav */
/* THE NAV BAR WAS A GREY BAND LAID ACROSS THE IVORY.
   Operations lifts its ground: `rgba(244,242,237,.07)`, ivory at 7% on navy.
   Mirroring that as "the other colour at low alpha" gives `rgba(4,9,18,.05)`,
   which does the opposite - it DARKENS ivory to about #e8e6e2, a flat grey
   strip sitting on a warm ground, which is the single most visible grey on the
   page and the first thing anyone sees. The mirror of lifting a dark ground is
   lifting a light one, so the scrim is white. */
/* SOLID AT THE TOP, GLASS ONCE YOU MOVE. At rest the bar carries the page's own
   ivory and reads as part of the header rather than as a thing floating over it.
   The moment you scroll it drops to a third of that and lets the page run
   underneath; the 14px backdrop blur is what keeps the type legible, so the bar
   gets out of the way without going away. The border softens on the same curve,
   because a hard hairline around a see-through pill is the part that looks
   stuck on. */
nav{position:fixed;inset:20px 20px auto;z-index:10;display:flex;align-items:center;justify-content:space-between;
    padding:15px 28px;border-radius:999px;background:rgba(244,242,237,.97);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);
    transition:background .3s,border-color .3s}
nav.scrolled{background:rgba(244,242,237,.34);border-color:rgba(157,175,204,.14)}
/* A LINK IS A TARGET. Same 44px floor as Operations, same reason. */
nav .brand{font-size:var(--fs-brand);color:var(--ink);text-decoration:none;
     display:inline-flex;align-items:center;min-height:44px}
nav ul{display:flex;gap:26px;list-style:none;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em}
/* Operations sets these to #c9d4e8 on navy - near the full lettering value, not
   a mid tone. --muted is the scheme's colour for captions, and using it here put
   the navigation at 4.08:1 on ivory, which reads as grey rather than as type. */
nav a{color:var(--accent-on-light);text-decoration:none;opacity:.9;
     display:inline-flex;align-items:center;min-height:44px}
nav a:hover{opacity:1;color:var(--ink)}
/* THE NAV BUTTON'S SIZE BELONGS IN THE STYLESHEET, NOT ON THE ELEMENT.
   This was an inline `style="padding:11px 24px;font-size:var(--fs-micro)"`,
   and an inline declaration beats a rule, so the mobile `nav .btn` override
   below never applied on either service: both rendered at 24px padding and
   11.5px on a phone. Operations had 18px of slack and survived; Origination's
   label is wider, so between 400px and 410px its button dropped below the
   wordmark while Operations' stayed beside it. Same markup, same widths, two
   different navs. Declared here so the phone rule can win on both. */
nav .btn{padding:11px 24px;font-size:var(--fs-micro)}

/* THE WAY BACK IS A BACK BUTTON, NOT A FOURTH LINK. Identical to Operations:
   an arrow beside the wordmark, one tap target, and the link row untouched. */
nav .back{width:20px;justify-content:center;font-size:15px;line-height:1;opacity:.75}
nav .back:hover,nav .back:focus-visible{opacity:1}


/* buttons: the inverse fill. Operations puts ink type on a silver pill; here a
   navy pill carries ivory type, which is the same contrast the other way up. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:14px 28px;font-size:var(--fs-xs);
     min-height:44px;
     text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;
     font-weight:500;text-decoration:none;color:var(--paper);background:var(--ink);border:none;cursor:pointer;
     font-family:var(--sans);transition:gap .2s,background .2s}
.btn:hover{gap:18px;background:#101a2e}
.btn.ghost{background:transparent;border:1px solid var(--hair-strong);color:var(--ink)}
/* A GHOST INVERTS, IT DOES NOT TINT. This was `rgba(4,9,18,.05)` with no colour
   change at all: 5% of navy laid under type that stayed navy, which on ivory is
   a hover you cannot see. Every ghost button on this service sits on ivory
   except the one inside the navy route card, which overrides this below, so
   filling navy with ivory type is right everywhere it applies. `:active` and
   `:focus-visible` are named with `:hover` so a tap and a keyboard both get the
   same state - a pointer is not the only way to reach a button. */
.btn.ghost:hover,.btn.ghost:active,.btn.ghost:focus-visible{background:var(--ink);
      color:var(--paper);border-color:var(--ink)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn[disabled]:hover{gap:12px;background:var(--ink)}
.arrow::after{content:"";width:18px;height:12px;flex:none;background:currentColor;
     -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M15.5 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
     mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M15.5 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
/* The same arrow as `.arrow`, rotated: a shaft and a two-stroke chevron at the
   same 2.4 weight, so the hero's two actions point where each one goes. */
.arrow-down::after{content:"";width:12px;height:18px;flex:none;background:currentColor;
     -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 1v21M2 15.5l6 6.5 6-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
     mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 1v21M2 15.5l6 6.5 6-6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.textlink{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:var(--fs-base);
     min-height:44px;transition:gap .2s}
.textlink:hover{gap:18px}

/* hero — explicit padding rather than a vh min-height, so the space under
   the buttons stays constant instead of growing with the viewport */
.hero{padding:164px 0 72px;display:flex;align-items:center;position:relative;text-align:center}
.hero .wrap{position:relative;width:100%}
.hero .rule{width:64px;height:1px;background:var(--hair-strong);margin:36px auto}
.hero p+p{margin-top:18px}
.hero .promise{color:var(--ink)}
.hero p{max-width:620px;margin:0 auto;font-size:var(--fs-lede);color:var(--body-on-light)}
.hero .cta{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:16px}

/* editorial split */
.on-paper{background:transparent;color:var(--body-on-light)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--hair)}
.frame img{width:100%;height:100%;object-fit:cover}
.caption{margin-top:14px;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.on-paper p{color:var(--body-on-light)}

/* services */
.services-head{text-align:center;max-width:640px;margin:0 auto 56px}
/* FOUR CATEGORIES, FOUR COLUMNS. At 1140px these could only sit 2x2, which put
   a taxonomy into a box grid and stacked the section to nearly twice the height
   it needs. On the wide measure the four run as one row, which is what they
   are: a set of peers you scan across, not four panels you read in turn. The
   cards come in to 28px of padding at that width because the column is
   narrower than the half-width card it replaces. Below 1180 there is no longer
   room for four honest columns, so it falls back to the 2x2 it used to be, and
   to a single column on a phone. */
.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media(max-width:1180px){.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Operations' card is a dark gradient lifted off a dark page. This is the same
   card lifted off a light one: the gradient runs the other way, the hairline stays. */
/* ONE CARD IS NAVY AT REST AND THE OTHER THREE ARRIVE THERE ON HOVER, SO THE
   TWO APPEARANCES ARE TOKENS RATHER THAN TWO SETS OF RULES. Composite is the
   category that is two or more of the others, and standing it in the inverse of
   its neighbours says that before its subtitle does. But it cannot simply be
   "the hover state, always": it has to invert the other way when a pointer
   reaches it, or it is the one card on the page that does not answer.

   Written as two states x nine properties that would be four blocks of
   near-identical declarations. Written as a token set it is one block of
   plumbing and three short blocks that only swap values, and a tenth property
   later costs one line instead of four. */
.service-card{
  --card-bg:#faf9f5;
  --card-bd:var(--hair);
  --card-h3:var(--ink);
  --card-n:var(--accent-on-light);
  --card-sub:var(--accent-on-light);
  --card-body:var(--body-on-light);
  --card-rule:var(--hair);
  --card-ring:var(--accent-on-light);
  --card-btn-bg:var(--ink);
  --card-btn-fg:var(--paper);
  background-color:var(--card-bg);color:var(--card-body);border-radius:var(--radius);padding:36px 32px;
  display:flex;flex-direction:column;border:1px solid var(--card-bd)}
/* THE NAVY SET. Named once, used by composite at rest and by the other three on
   hover, so the two can never drift apart. */
/* AND BOTH STATES ARE A COLOUR, BECAUSE A GRADIENT CANNOT CROSS-FADE TO ONE.
   The ivory state was `linear-gradient(165deg,#fdfcfa,#faf9f5 55%,#f6f4ee)` and
   the navy state was `var(--ink)`. Those are different properties underneath:
   one is a background-IMAGE, the other a background-COLOR, and CSS interpolates
   neither into the other. The image simply switches in a single frame.

   On cards 01 to 03 that was invisible. They go gradient to colour, so the
   gradient disappears at the start of the hover and what it exposes is ivory on
   ivory; the navy then fades up underneath on the colour, which does animate.
   Composite runs the same thing backwards and it is anything but invisible: the
   opaque ivory gradient APPEARS in frame one and the card is white before the
   transition has begun. Which is exactly the report - the other three fine,
   composite worse than before.

   So the ivory state becomes the flat `#faf9f5`, which is the gradient's own
   midpoint; it spanned #fdfcfa to #f6f4ee, seven units end to end, and at that
   range a flat fill is not a loss worth a broken transition. The animated
   property is named `background-color` rather than the `background` shorthand,
   so it cannot silently pick up an image again later.

/* THE TRANSITION LIVES HERE, AT A SPECIFICITY THAT BEATS `.reveal`, AND IT
   CARRIES THE REVEAL'S OWN PROPERTIES TOO. This was written as `.service-card
   {transition:...}` and did nothing at all: every card also carries `.reveal`,
   which declares `transition:opacity .7s ease,transform .7s ease` at the same
   specificity and later in the file, so it won on source order and replaced the
   whole list. The colours were changing instantly - what read as "too quick a
   flip" was not a duration at all, it was no transition.

   `transition` is one property, so the two cannot be declared separately on one
   element: the reveal's opacity and transform are folded in here.

   .62s on a curve that starts slowly and settles, rather than .32s on `ease`.
   A button is 44px of surface and a card is most of a column; the same duration
   across that much area reads as a wall of colour landing. What makes the ghost
   buttons feel gentle is their size and an arrow that travels, not their speed.
   The lift comes down from 3px to 2px and the shadow softens, because a card
   that jumps as well as turning over is two events at once. */
.service-grid .service-card{
  transition:opacity .7s ease,
             transform .55s cubic-bezier(.4,0,.2,1),
             background-color .62s cubic-bezier(.4,0,.2,1),
             border-color .62s cubic-bezier(.4,0,.2,1),
             box-shadow .62s cubic-bezier(.4,0,.2,1)}
.service-card.invert{
  --card-bg:var(--ink);
  --card-bd:var(--ink);
  --card-h3:var(--paper);
  --card-n:var(--silver);
  --card-sub:var(--silver);
  --card-body:#a8b0c2;
  --card-rule:rgba(244,242,237,.15);
  --card-ring:var(--silver);
  --card-btn-bg:var(--paper);
  --card-btn-fg:var(--ink)}
/* AND THE PADDING COMES IN WHERE FOUR COLUMNS ARE LIVE, AND ONLY THERE.
   36px/32px was set for a half-width card; on a 273-361px column it eats a
   fifth of the line. This has to sit AFTER the base rule, not before it: a
   media query adds no specificity, so an identical selector earlier in the
   file loses on source order and the override silently does nothing. It is
   also floored at 1181px rather than 881px, because between 881 and 1180 the
   grid is back to 2x2 at 435-516px per card, which never needed the room. */
@media(min-width:1181px){.service-card{padding:32px 28px}}
.service-card h3{display:flex;align-items:baseline;gap:11px;
      font-family:var(--serif);font-weight:500;font-size:20px;line-height:1.25;
      text-transform:uppercase;letter-spacing:.1em;color:var(--card-h3)}
/* THE NUMBER SITS ON THE HEADING'S FIRST BASELINE, NOT ABOVE IT. A flex row
   with `align-items:baseline` keeps 02 level with the T of "Tenurial" and lets
   the second line of a wrapping heading indent under the words rather than
   under the digits. It is set in the sans at micro size against the serif, the
   same pairing the five steps already use for 01 to 05. */
.card-n{flex:none;font-family:var(--sans);font-size:var(--fs-micro);font-weight:500;
      letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--card-n)}
.sub{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-on-light)}
.service-card .sub{color:var(--card-sub)}
.service-card .sub{margin-top:5px}
.service-card>p{margin-top:16px;font-size:var(--fs-sm);line-height:1.65;color:var(--card-body)}
.hairlines{list-style:none;margin:20px 0 28px}
.hairlines li{position:relative;padding:9px 0 9px 20px;border-bottom:1px solid var(--card-rule,var(--hair));font-size:var(--fs-sm);line-height:1.5;color:var(--card-body,var(--body-on-light))}
/* A SMALL HOLLOW RING, NOT A DISC. The list is a vocabulary, not a set of
   claims, so the marker states membership and nothing more. Drawn at 7px
   with a hairline so it reads at the weight of the rules around it. */
.hairlines li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;
     border:1px solid var(--card-ring,var(--accent-on-light));border-radius:50%}
.hairlines li:last-child{border-bottom:none}
.service-card .btn{margin-top:auto;align-self:flex-start;
      background:var(--card-btn-bg);color:var(--card-btn-fg)}
.service-card .custom-note{margin-top:14px;font-size:.94em;opacity:.78}

/* ================================================== THE CARDS ANSWER A POINTER
   The page was a flat sheet: nothing moved, nothing faded in, nothing changed
   colour. The four situation cards are the largest objects on it and the ones a
   reader is actually choosing between, so they are the right place to put that.
   A card crosses to the other token set and lifts 3px. Three of them go ivory
   to navy; composite, which starts navy, goes the other way, so every card
   answers a pointer and composite still reads as the odd one out at rest.

   `(hover: hover)` gates the CROSSING, not the token sets. Composite keeps its
   navy on a touch screen because that lives on `.invert` outside this block;
   what the gate prevents is :hover latching on tap and leaving a phone with one
   card stuck in the wrong state.

   Because the appearance is tokens, each direction is a swap of ten custom
   properties and nothing restates a colour. */
@media (hover: hover) and (pointer: fine){
  /* IT ARRIVES, IT DOES NOT FLIP. The first version ran at .32s, matched to the
     buttons - but a button is 44px of surface and a card is most of a column,
     and the same duration across that much area reads as a wall of colour
     landing rather than a state changing. What makes the ghost buttons feel
     gentle is not their speed, it is their size, plus an arrow that travels
     instead of snapping.

     So the colour takes .62s on a curve that starts slowly and settles
     (cubic-bezier(.4,0,.2,1)) rather than `ease`, which front-loads the change
     and is exactly what made it feel abrupt. The lift comes down from 3px to
     2px and the shadow softens, because a card that jumps as well as turning
     over is two events at once. Everything inside runs on the same .62s so
     nothing lands early and nothing trails. */
  .service-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(4,9,18,.10)}

  /* ivory -> navy */
  .service-card:not(.invert):hover{
    --card-bg:var(--ink);--card-bd:var(--ink);--card-h3:var(--paper);
    --card-n:var(--silver);--card-sub:var(--silver);--card-body:#a8b0c2;
    --card-rule:rgba(244,242,237,.15);--card-ring:var(--silver);
    --card-btn-bg:var(--paper);--card-btn-fg:var(--ink)}

  /* navy -> ivory */
  .service-card.invert:hover{
    --card-bg:#faf9f5;
    --card-bd:var(--hair);--card-h3:var(--ink);
    --card-n:var(--accent-on-light);--card-sub:var(--accent-on-light);
    --card-body:var(--body-on-light);
    --card-rule:var(--hair);--card-ring:var(--accent-on-light);
    --card-btn-bg:var(--ink);--card-btn-fg:var(--paper)}

  .service-card .hairlines li:last-child{border-bottom:none}
  .service-card h3,.service-card .card-n,.service-card .sub,.service-card>p,
  .service-card .hairlines li,.service-card .hairlines li::before,
  .service-card .btn{transition:color .62s cubic-bezier(.4,0,.2,1),
        background-color .62s cubic-bezier(.4,0,.2,1),
        border-color .62s cubic-bezier(.4,0,.2,1)}
}

/* ---------------------------------------------------------------- HOW WE WORK
   Five steps under Situations. NUMBERED, and the numbering is not decoration:
   this is the only part of the page that is genuinely a sequence, so it is the
   only part that carries 01 to 05. The four situation types above are
   categories a mandate selects among, not stages, and they stay unnumbered.

   Deliberately lighter than the cards above them: a hairline over each column
   rather than a bordered panel, so the eye reads the cards as the substance and
   these as the explanation of how the substance reaches you. */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
@media(max-width:1080px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}}
.step{position:relative;display:flex;flex-direction:column;gap:9px;padding-top:18px;
      border-top:1px solid var(--hair-strong)}
/* AND THE RULE DRAWS IN. The hairline over each step is the only thing marking
   it as a column, so it is the thing that should answer a pointer. A second
   1px line sits exactly over the border in the Artemis blue and wipes in from
   the left on hover, which reads as the step being picked up rather than
   merely highlighted. .lit is the same state reached by scrolling, for touch,
   where there is no pointer to answer. scaleX on a transform stays on the
   compositor, so this costs nothing on a phone.

   TWO PIXELS, NOT ONE, AND THAT IS NOT AN ARBITRARY CHOICE. The Artemis blue
   is 1.9:1 on this ivory, which is LIGHTER in value than the 26% black
   hairline it draws over. At 1px the hover therefore read as the rule fading
   out rather than arriving. Rendered side by side, 2px is the weight at which
   the blue registers as the line gaining substance. Blue-graphite at 1px was
   the other candidate and it simply reads as a darker grey - it does not read
   as blue at all, which is the thing that was asked for. */
.step::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;
      background:var(--silver);transform:scaleX(0);transform-origin:left center;
      transition:transform .55s cubic-bezier(.22,1,.36,1)}
.step:hover::before,.step.lit::before{transform:scaleX(1)}
.step-n{font-size:var(--fs-micro);letter-spacing:.16em;color:var(--body-on-light);
        font-variant-numeric:tabular-nums}
.step h3{font-family:var(--serif);font-weight:500;font-size:16px;line-height:1.25;
         letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.step p{font-size:12.5px;line-height:1.62;color:var(--body-on-light)}

/* THE TWO OTHER ROUTES ARE CARDS, NOT AN ACCORDION.
   They were two <details> rows that had to be opened before they said anything,
   which is the wrong shape for the one part of the page addressed to someone
   who is NOT the acquirer it is written for. Two cards, open, with the action
   visible. */
.route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.route-grid .card{border:1px solid var(--hair);border-radius:var(--radius);
      display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.route-grid .card h3{font-family:var(--serif);font-weight:500;font-size:19px;
      line-height:1.25;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.route-grid .card p{font-size:var(--fs-sm);line-height:1.68;color:var(--body-on-light)}
.route-grid .card .btn{margin-top:4px}
/* ONE OF THE PAIR IS NAVY. Two identical ivory cards read as one option shown
   twice; the page's whole point is that these are two different readers, and
   the introducer is the one who cannot sell. Inverting that card states the
   difference before either heading is read. The body takes Operations' own
   --body-on-dark rather than ivory at some opacity, so navy means the same
   thing on both services, and the ghost button inverts with it. */
.route-grid .card.navy{background:var(--ink);border-color:var(--ink)}
.route-grid .card.navy h3{color:var(--paper)}
.route-grid .card.navy p{color:#a8b0c2}
/* ITS BUTTON IS A GHOST AT REST AND INVERTS WHEN TOUCHED, AND THE INVERSION HAS
   TO CARRY THE LABEL WITH IT. This went wrong twice and both faults are worth
   naming, because they are the same fault at different layers.

   The first: the base `.btn.ghost:hover` used to set `rgba(4,9,18,.05)`, a wash
   meant for a ghost on IVORY, with no colour change at all. On this navy card it
   composited to rgb(26,30,36): the background lifted about 8% and the label
   stayed ivory, so hovering moved the pill and left the type where it was. A
   hover that moves the fill without moving the text is worse than no hover - it
   reads as the control half-working. That base rule is now a real inversion too.

   The second: the inversion that fixes it was written inside
   `@media (hover: hover) and (pointer: fine)`. That gate belongs on the card
   invert, which latches badly on a touch screen, but on a BUTTON a latched
   inverted state just reads as pressed, and gating it meant the correct rule
   never applied wherever that media query is false - leaving the 8% wash as
   the only thing that fired. So this pair is ungated, and `:active` is named
   alongside `:hover` so a tap inverts it too.

   Both states are full inversions of each other, not tints: transparent with
   ivory type, or ivory with navy type at 17.8:1. The arrow rides `currentColor`
   so it turns with the label rather than being left behind. */
.route-grid .card.navy .btn.ghost{background:transparent;color:var(--paper);
      border-color:rgba(244,242,237,.34);
      transition:background .25s ease,color .25s ease,border-color .25s ease}
.route-grid .card.navy .btn.ghost:hover,
.route-grid .card.navy .btn.ghost:active,
.route-grid .card.navy .btn.ghost:focus-visible{background:var(--paper);
      color:var(--ink);border-color:var(--paper)}

/* editorial duo band */
/* THE TWO PHOTOGRAPHS ARE A PAIR AND THEY STAY TOGETHER.
   They briefly ran on the wide measure with the frames capped at 460px and
   pushed to opposite outer edges. The arithmetic was fine - the band got no
   taller - but the result was not a spread, it was two photographs with 520px
   of nothing between them, which is not what a pair is. The band goes back on
   the prose measure at its own size, 26px apart, the second still dropped 72px
   against the first. Width was the right thing to give the situations grid and
   the five steps, which are sets you scan across. It was never the right thing
   to give this. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.duo .frame-col:last-child{margin-top:72px}
/* AND THE PAIR DRIFTS AS IT PASSES. A slow vertical offset tied to the scroll
   position, opposite on each column, so the 72px stagger opens and closes as
   you go by instead of sitting still. The photographs themselves are not
   touched - the FRAME moves, nothing is scaled and nothing is cropped further
   than it already is.

   Scroll-driven animation only, behind @supports: where the browser has no view
   timeline the rule is skipped entirely rather than running once on load and
   leaving the frames parked at the end of the drift. 18px is deliberately small
   - at a glance it reads as the page breathing, not as a parallax effect. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:881px){
    .duo .frame-col{animation:duo-drift linear both;animation-timeline:view();
          animation-range:entry 0% exit 100%}
    .duo .frame-col:last-child{animation-name:duo-drift-rev}
    @keyframes duo-drift{from{translate:0 18px}to{translate:0 -18px}}
    @keyframes duo-drift-rev{from{translate:0 -18px}to{translate:0 18px}}
  }
}
/* The band carries type, not photography: a rule above each column states the
   pairing the way a framed image used to, without a picture that means nothing.
   Serious work on this page is done by structure, not by styling shots. */
.duo>div:not(.frame-col){padding-top:22px;border-top:1px solid var(--hair-strong)}
.duo>div:not(.frame-col) p{max-width:46ch;font-size:var(--fs-base)}
.pull{max-width:560px;margin:72px auto 0;text-align:center}
.pull .display{font-size:clamp(21px,2.3vw,29px);font-weight:400;font-style:italic;color:var(--ink)}

/* FAQ */
.faq-wrap{max-width:820px}
.faq-head{text-align:center;margin-bottom:36px}
.faq-list{border-top:1px solid var(--hair-strong)}
.faq-list details{border-bottom:1px solid var(--hair-strong)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
     gap:24px;min-height:64px;padding:18px 0;color:var(--ink);font-family:var(--serif);font-size:20px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;color:var(--accent-on-light);font-family:var(--sans);font-size:24px;font-weight:300}
.faq-list details[open] summary::after{content:"\00d7"}
.faq-list p{padding:0 44px 22px 0;color:var(--body-on-light);font-size:var(--fs-base)}

/* footer */
footer{padding:0 0 48px}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;font-size:var(--fs-sm);color:var(--body-on-light)}
.socials{display:flex;gap:12px;margin-top:22px}
.foot-mail{margin-top:8px;font-size:var(--fs-sm)}
/* 42px is two short of the floor, and the drawn circle is the target here. */
.socials a{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-strong);display:inline-flex;
      align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.socials a:hover{border-color:var(--ink);background:rgba(4,9,18,.05)}
.socials svg{width:18px;height:18px;fill:var(--ink)}
.foot-links{list-style:none;text-align:right}
.foot-links li{margin-bottom:12px}
.foot-links a{color:var(--body-on-light);text-decoration:none;font-size:var(--fs-sm);
     display:inline-flex;align-items:center;min-height:44px}
.foot-links a:hover{color:var(--ink)}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:24px;
      border-top:1px solid var(--hair);font-size:var(--fs-sm);color:var(--muted)}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
/* THEY ARRIVE IN ORDER, NOT ALL AT ONCE. One observer fired every block with an
   identical .7s fade, so a row of four cards materialised as a single slab and
   the page had no reading order. Each card in a row now waits a little longer
   than the one before it, which is the difference between a page appearing and
   a page being dealt out. 70ms is enough to read as sequence and short enough
   that the last card is only a fifth of a second behind the first. */
.service-grid>.reveal:nth-child(2),.steps>.reveal:nth-child(2),
.route-grid>.reveal:nth-child(2){transition-delay:.07s}
.service-grid>.reveal:nth-child(3),.steps>.reveal:nth-child(3){transition-delay:.14s}
.service-grid>.reveal:nth-child(4),.steps>.reveal:nth-child(4){transition-delay:.21s}
.steps>.reveal:nth-child(5){transition-delay:.28s}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}}

@media(max-width:880px){
  /* THE COLUMN MUST NOT BE WIDER THAN WHAT HOLDS IT. Same containment fix
     Operations already learned the hard way: `1fr` floors at min-content, so one
     long unbreakable child widens the column, the column widens the grid, and
     the document scrolls sideways. */
  .split,.service-grid,.duo,.steps,.route-grid{grid-template-columns:minmax(0,1fr)}
  .steps{gap:26px}
  .step h3{font-size:19px}
  .step p{font-size:var(--fs-sm)}
  .route-grid .card .btn{align-self:stretch;white-space:normal;text-align:center;justify-content:center}
  nav{inset:12px 12px auto;padding:10px 16px;flex-wrap:wrap}
  nav ul{display:flex;order:3;flex-basis:100%;justify-content:center;gap:18px;
       margin-top:6px;padding-top:6px;border-top:1px solid var(--hair)}
  nav ul a{min-height:36px;font-size:10px;white-space:nowrap}
  nav .brand{font-size:14px}
  /* AND THE TWO NAV BUTTONS ARE ONE OBJECT, NOT TWO LABELS LEFT TO THEIR OWN
     METRICS. "Register a Mandate" sets 16px wider than "Initiate a Service" at
     the same size, so unattended the two navs wrap at different widths: at
     375px Operations held one row while Origination had already dropped to
     two. That is the same divergence the inline style caused, arriving
     through type metrics instead. The tracking comes in and the padding comes
     down, which brings the longer label inside the narrower budget, and a
     shared min-width then makes both pills the same width - so the two navs
     wrap at the same width by construction and cannot drift apart again.
     The widths were measured with the fallback face, which is wider than
     Inter Tight, so the real pill has room to spare rather than none. */
  nav .btn{padding:9px 14px;font-size:10.5px;letter-spacing:.04em;min-height:44px;
       min-width:188px}
  nav .back{width:18px;font-size:14px}
  .service-card{padding:28px 22px}
  /* AND THE BUTTON HAS TO BE ALLOWED TO WRAP. On a phone the label wraps and the
     control goes full width, which is the conventional shape there anyway. */
  .service-card .btn{white-space:normal;align-self:stretch;text-align:center;
      justify-content:center;text-wrap:balance}
  /* 172px, the same clearance Operations uses, for the same one-line nav. */
  .hero{padding:172px 0 64px}
  /* AND WHERE THE NAV TAKES A THIRD ROW, THE HERO HAS TO MOVE WITH IT.
     172px clears a two-row nav. Below 375px the button takes its own row, the
     nav reaches 177px including its inset, and the hero wordmark was starting
     5px UNDER it - the two overlapped on the narrowest phones. This is the
     only width band where that happens, so it is the only band that moves. */
  @media(max-width:374px){.hero{padding:196px 0 64px}}
  h1.display{font-size:clamp(32px,9.5vw,44px)}
  .hero .eyebrow{font-size:17px;letter-spacing:.22em}
  .hero p{font-size:var(--fs-base)}
  /* the mobile nav is shorter, so it needs less clearance */
  section[id],footer[id],.service-card[id]{scroll-margin-top:100px}
  .duo .frame-col:last-child{margin-top:0}
  .foot-grid{flex-direction:column}
  /* THE FOOTER WAS THREE BLOCKS FLOATING IN THEIR OWN MARGINS.
     The wordmark is drawn at 188px, the email sits in a 44px tap target with
     8px above it and the socials add another 22px on top of their own 44px
     row, so on a phone the identity block ran past 190px of mostly air and
     the three elements read as unrelated rather than as one signature.
     The 44px targets are a floor and are not touched. What comes off is the
     margin stacked on top of them, and the mark comes down to a size that
     belongs beside 13.5px type. */
  .foot-grid img{width:150px}
  .foot-mail{margin-top:2px}
  .socials{margin-top:6px}
  /* AND THE LEGAL LINE IS TWO LINES, NOT ONE ROLLING ONE.
     `.legal` is a space-between row that wraps, which on a phone put the
     company name and its number on one wrapped run - "... Ltd. Company" then
     "No. 16933084" - breaking the number away from its own label. Stacked
     deliberately, with the number held together in the markup. */
  .legal{flex-direction:column;gap:6px}
  .foot-links{text-align:left}
  section{padding:72px 0}
  .split{gap:28px}
  /* AND ON A PHONE THERE ARE NOT TWO MEASURES, THERE IS ONE COLUMN.
     `100vw - 72px` is an inset that only exists where there is width to give
     up. At 390px it took 72px off EVERY block and centred what was left, so a
     measured column meant for a desktop became a 232px trench on a phone and
     the page got taller for it. Both measures collapse onto the container here
     and the 28px gutter is the only inset, which is what shipped before. */
  :root{--measure-prose:100%;--measure-wide:100%}
  .pull{margin-top:56px}
  .legal{margin-top:32px}
}
/* ================================================================= INTAKE
   The three routes. Restrained, document-like, one step at a time. Controls
   are 16px because a control below 16px makes iOS Safari zoom the page on
   focus, which on a form this long reads as the page breaking. */

.intake-page{padding:170px 0 90px}
.wrap.narrow{max-width:760px}
.intake-page .lede{margin-bottom:44px}

/* progress: a count and a row of ticks, not a bar and not a long dot parade */
.progress{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.progress-label{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
                color:var(--muted);white-space:nowrap}
.progress-track{display:flex;gap:6px;flex:1}
.tick{height:2px;flex:1;background:var(--hair);border-radius:2px;transition:background .3s}
.tick.on{background:var(--ink)}

.step-head{margin-bottom:30px}
.step-head h2{font-size:clamp(22px,2.4vw,30px)}
.step-head h2:focus{outline:none}
.step-note{margin-top:14px;font-size:var(--fs-sm);color:var(--muted);line-height:1.7;max-width:64ch}

.fields{display:grid;gap:28px}
.field{display:grid;gap:8px}
.label{font-size:var(--fs-sm);letter-spacing:.04em;color:var(--ink);font-weight:500;line-height:1.5}
.help{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin-top:-2px}

/* 16px EXACTLY, and not var(--fs-base). The shared scale's base step is 15px,
   inherited from Operations and correct for body copy. A form control below
   16px makes iOS Safari zoom the page on focus, which on a form this long reads
   as the page breaking. That is a platform constraint, not a type decision, so
   it is pinned here rather than by bending the scale both pages share. */
.control{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);
         background:#fdfcfa;border:1px solid var(--hair-strong);border-radius:12px;
         padding:13px 15px;min-height:48px;transition:border-color .2s,background .2s}
.control:hover{border-color:rgba(4,9,18,.38)}
.control:focus{border-color:var(--ink);background:#fff;outline:none;
               box-shadow:0 0 0 3px rgba(157,175,204,.35)}
textarea.control{min-height:132px;line-height:1.65;resize:vertical}
select.control{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c6678' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px}

/* multi-select and consent: the whole row is the target, 48px tall */
.choices{display:grid;gap:2px}
.choice,.check{display:flex;align-items:flex-start;gap:13px;cursor:pointer;
       padding:12px 14px;min-height:48px;border-radius:10px;border:1px solid transparent;
       font-size:16px;line-height:1.5;color:var(--body-on-light);transition:background .18s,border-color .18s}
.choice:hover,.check:hover{background:rgba(4,9,18,.04)}
.choice input,.check input{appearance:none;flex:none;width:20px;height:20px;margin-top:2px;
       border:1px solid var(--hair-strong);border-radius:5px;background:#fdfcfa;cursor:pointer;
       transition:background .18s,border-color .18s}
.choice input:checked,.check input:checked{background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5 5 9.5 13 1.5' fill='none' stroke='%23f4f2ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:11px}
.choice input:focus-visible,.check input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.check{align-items:flex-start;padding:16px 14px;border-color:var(--hair);background:#fdfcfa}

/* errors: stated on the field, never as a single banner at the top */
.err{font-size:var(--fs-sm);color:#8a2b20;line-height:1.5;min-height:0}
.err:empty{display:none}
.field.has-error .control{border-color:#8a2b20;background:#fdf7f6}
.field.has-error .check{border-color:#8a2b20}

.form-nav{display:flex;gap:14px;align-items:center;margin-top:40px;flex-wrap:wrap}
.form-nav .btn{min-width:150px}

/* review */
.review{margin-top:8px;border-top:1px solid var(--hair-strong)}
.review-group{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
              padding:26px 0 10px;border-bottom:1px solid var(--hair)}
.review-group h3{font-family:var(--serif);font-size:19px;text-transform:uppercase;
                 letter-spacing:.1em;color:var(--ink);font-weight:500}
.linkish{background:none;border:none;font-family:var(--sans);font-size:var(--fs-sm);
         color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
         text-decoration-color:var(--silver);padding:10px 4px;min-height:44px}
.linkish:hover{text-decoration-color:var(--ink)}
.review dt{font-size:var(--fs-sm);color:var(--muted);padding:14px 0 0;line-height:1.5}
.review dd{font-size:var(--fs-base);color:var(--ink);padding:4px 0 14px;line-height:1.6;
           border-bottom:1px solid var(--hair);overflow-wrap:anywhere}

.submit-status{margin-top:26px;font-size:var(--fs-sm);color:var(--muted);line-height:1.6}
.submit-status:empty{display:none}
.submit-status.is-error{color:#8a2b20}

/* the confirmed state */
.done .ref{margin-top:18px;font-size:var(--fs-lede);color:var(--ink)}
.done .ref strong{font-weight:500;letter-spacing:.08em;font-family:var(--sans)}
.done p{margin-top:16px;font-size:var(--fs-base);max-width:62ch}
.foot-note.small{margin-top:48px;font-size:var(--fs-sm);color:var(--muted);line-height:1.7;max-width:70ch}

@media(max-width:820px){
  .intake-page{padding:172px 0 70px}
  .progress{gap:10px}
  .progress-label{font-size:11px}
  .form-nav{flex-direction:column-reverse;align-items:stretch}
  .form-nav .btn{width:100%;white-space:normal;text-align:center;justify-content:center}
  .review-group{flex-direction:row;align-items:center}
}


/* The two non-acquirer routes. Deliberately quieter than the mandate CTA above
   them: this page is written for people who buy, and a seller or an introducer
   is a smaller door beside the main one rather than a competing entrance. */
.narrow-head{margin-bottom:30px}
.card.compact{padding:26px 24px}
.card.compact h3{font-size:17px}
.card.compact>p{margin-top:12px;margin-bottom:22px}
.card.compact .btn{margin-top:0}
/* EXCEPT IN THE ROUTE PAIR, WHERE THEY HAVE TO AGREE. The two cards stretch to
   the same height but hold paragraphs of different lengths, so a button that
   follows its own paragraph lands at a different height in each - which is
   what you see side by side on a desktop. `auto` puts the free space above the
   button instead of below it, so both sit on the floor of their card and
   therefore on the same line. It needs this specificity because `.card.compact
   .btn` above is the rule that was pinning them to their paragraphs. */
.route-grid .card.compact .btn{margin-top:auto}
#other-routes{padding:64px 0 72px}
#other-routes .display{font-size:clamp(20px,2.1vw,26px)}

/* The intake's "not open yet" panel. Deliberately not the error treatment: a
   503 is the deployment's state, not the visitor's mistake, and colouring it
   like a failure tells them they did something wrong when they did not. */
.notice{margin-top:40px;padding:30px 28px;border:1px solid var(--hair-strong);
        border-radius:var(--radius);background:#faf9f6}
.notice:focus{outline:none}
.notice h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.3;
           text-transform:uppercase;letter-spacing:.09em;color:var(--ink);margin-top:10px}
.notice p{margin-top:16px;font-size:var(--fs-base);line-height:1.7;max-width:60ch}
.notice .btn{margin-top:6px}
@media(max-width:820px){
  .notice{padding:24px 20px}
  .notice .btn{white-space:normal;text-align:center;justify-content:center;width:100%}
}