/* ==========================================================================
   redbroch.com

   Values come from Redbroch-Visual-System/tokens/brand.json, which is the
   source of truth for every colour and type value. Anything not in that file
   is derived here for this application and is marked as such, with the ground
   it sits on recorded beside it. Derived values are replaced, not promoted,
   when a semantic palette is selected.

   Contents
     1  Tokens
     2  Scheme
     3  Reset and base
     4  Type
     5  Shell and rhythm
     6  Header and navigation
     7  Links and buttons
     8  Objects and figures
     9  Sections
    10  Footer
    11  Motion
    12  Responsive
   ========================================================================== */

/* 1  Tokens ================================================================= */

:root{
  /* Selected, from tokens/brand.json */
  --ground:#FDFCF9;              /* background, barely warm white */
  --deep:#4C1823;                /* burgundy, identity */
  --paper:#FFFFFF;               /* white, on burgundy and as a raised plane */
  --ink:#292725;                 /* charcoal body text */

  /* Derived for this site. Ground recorded. Measured in _contrast.py. */
  --ink-2:#5A534B;               /* on --ground, secondary prose */
  --ink-3:#6E6659;               /* on --ground, labels and captions */
  --rule:#E5DFD4;               /* on --ground, hairline */
  --line-ctl:#998E82;            /* on --ground, control boundary. Measured at 3:1.
                                    A quiet button's edge is a control boundary, not a
                                    hairline, so it does not get the hairline value. */
  --wash:#F5F1E9;                /* on --ground, a barely raised plane */
  --on-deep-2:#E2CDD1;           /* on --deep, secondary prose */
  --rule-deep:rgba(255,255,255,.18);

  /* Type. Georgia for the wordmark and headings, Arial for body. No webfonts;
     the system carries both. Fallbacks are not visually identical, so wrapping
     and density are reviewed under substitution. */
  --display:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --text:Arial,Helvetica,"Helvetica Neue",sans-serif;

  /* Measure and rhythm */
  --shell:1240px;
  --gutter:clamp(22px,5.2vw,80px);
  --gap:clamp(24px,3.2vw,48px);
  --rhythm:clamp(88px,11vh,150px);      /* the standard gap between sections */
  --rhythm-lg:clamp(130px,17vh,230px);  /* used where a section should breathe */

  --radius:2px;
}

/* 2  Controls ==============================================================
   There was a scheme system here: the page carried one of two grounds and
   crossfaded into a burgundy chapter. Sam had it removed on 2026-09-14. The
   page is one ground now, which is also closer to what the visual system asks
   for: mostly light surfaces, burgundy as identity and small purposeful
   emphases, and no broad burgundy tiles down a website. */

:root{
  --btn-bg:var(--deep);
  --btn-ink:var(--paper);
  --btn-line:var(--line-ctl);
  --ring:var(--deep);
}

/* 3  Reset and base ========================================================= */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  /* clip, never hidden. overflow-x:hidden silently kills position:sticky. */
  overflow-x:clip;
  background:var(--ground);
  color:var(--ink);
  font:400 clamp(16.5px,.95rem + .18vw,18.5px)/1.62 var(--text);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;display:block}

::selection{background:var(--deep);color:var(--paper)}

:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
  border-radius:1px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--deep);color:var(--paper);
  padding:12px 18px;font-size:14px;
}
.skip:focus{left:12px;top:12px}

.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 4  Type =================================================================== */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  margin:0;
  text-wrap:balance;
}

h1{
  font-size:clamp(2.55rem,1.5rem + 3.7vw,5rem);
  line-height:1.03;
  letter-spacing:-.021em;
}

h2{
  font-size:clamp(1.95rem,1.3rem + 2.1vw,3.15rem);
  line-height:1.1;
  letter-spacing:-.016em;
}

h3{
  font-size:clamp(1.22rem,1.08rem + .5vw,1.55rem);
  line-height:1.24;
  letter-spacing:-.008em;
}

h4{
  font-size:clamp(1.05rem,1rem + .25vw,1.2rem);
  line-height:1.3;
}

p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

/* The eyebrow. Arial, spaced, quiet. It labels a section without decorating it. */
.eyebrow{
  font:400 clamp(11px,.62rem + .12vw,12.5px)/1 var(--text);
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 clamp(18px,2vw,30px);
  display:flex;align-items:center;gap:.85em;
}
.eyebrow::after{
  content:"";flex:1 1 auto;height:1px;background:var(--rule);
  max-width:120px;
}
.eyebrow.plain::after{display:none}

/* A lede sits under a heading and runs a little larger than body. */
.lede{
  font-size:clamp(1.08rem,1rem + .45vw,1.42rem);
  line-height:1.5;
  color:var(--ink-2);
  max-width:33ch;
}
.lede.wide{max-width:46ch}

.prose{max-width:62ch}
.prose.tight{max-width:52ch}

/* Numerals for the sequence and the ladder. Georgia oldstyle reads as a
   printed figure rather than a UI badge, which is the point. */
.num{
  font-family:var(--display);
  font-size:clamp(1.5rem,1.2rem + 1.1vw,2.3rem);
  line-height:1;
  color:var(--deep);
  letter-spacing:-.02em;
}

.small{font-size:.86rem;line-height:1.52;color:var(--ink-3)}

/* 5  Shell and rhythm ======================================================
   Section rhythm lives in margin, not padding, so two sections that meet do
   not stack their padding into a visible block. Only a ground change pays
   for padding. */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

section{margin-block:var(--rhythm)}
section.breathe{margin-block:var(--rhythm-lg)}
section.seam{margin-block:0}          /* two sections that should read as one */

/* A full-bleed hairline. This replaces every card border on the site. The
   boxiness came from outlining each group; a single rule above a row does the
   same grouping work without drawing a table. */
.rule{
  border:0;height:1px;background:var(--rule);
  margin:0;
}
.rule.bleed{
  width:100vw;
  margin-inline:calc(50% - 50vw);
}

/* 6  Header and navigation ================================================== */

.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--ground);
  transition:box-shadow .3s ease,padding .3s ease;
  padding-block:clamp(16px,1.9vw,24px);
}
.site-head::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--rule);opacity:0;transition:opacity .3s ease;
}
.site-head.stuck{padding-block:12px}
.site-head.stuck::after{opacity:1}

.head-in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* The wordmark is primary and leads the header alone. Lowercase Georgia. */
.word{
  font:400 clamp(20px,1.1rem + .55vw,25px)/1 var(--display);
  letter-spacing:.055em;
  color:var(--deep);
  text-decoration:none;
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.3vw,34px)}
/* Scoped away from .btn. `.nav a` is (0,1,1) and `.btn` is (0,1,0), so without
   this the navigation repaints the button's label --ink-2 over its burgundy
   ground, on every page. Specificity, not the cascade order, decided it. */
.nav a:not(.btn){
  font-size:.92rem;
  color:var(--ink-2);
  text-decoration:none;
  padding-block:6px;
  position:relative;
  transition:color .2s ease;
}
.nav a:not(.btn):hover{color:var(--ink)}
/* The current-page mark applies to text links only. A button already carries
   its own foreground, and repainting it here put charcoal text on burgundy. */
.nav a[aria-current="page"]:not(.btn){color:var(--ink)}
.nav a[aria-current="page"]:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--deep);
}

.nav .btn{margin-left:clamp(4px,1vw,14px)}

/* The menu control draws its own icon. It used to hold a font glyph, U+2630
   for closed and a multiplication sign for open, inside a button that also
   set uppercase and letter-spacing. Three things went wrong with that. The
   glyphs render at wildly different widths, so the button changed size when
   you tapped it. Letter-spacing applies after the glyph, which pushed both of
   them off centre. And the close mark was a stray piece of punctuation at
   .85rem rather than a control.

   Three drawn bars fix all three: fixed 44px box, nothing to re-centre, and
   the same three elements rotate into the close mark instead of being
   swapped for a different character. */
.menu-btn{
  display:none;
  width:44px;height:44px;padding:0;
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--btn-line);color:var(--ink);
  cursor:pointer;border-radius:var(--radius);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease,color .2s ease;
}
.menu-btn:hover{border-color:var(--deep);color:var(--deep)}
.menu-ico{position:relative;display:block;width:18px;height:12px}
.menu-ico > span{
  position:absolute;left:0;right:0;height:1.5px;
  background:currentColor;
  transition:transform .22s ease,opacity .14s ease;
}
.menu-ico > span:nth-child(1){top:0}
.menu-ico > span:nth-child(2){top:50%;margin-top:-0.75px}
.menu-ico > span:nth-child(3){bottom:0}
/* Driven by aria-expanded, so the state the assistive technology hears and
   the state you can see cannot drift apart. */
.menu-btn[aria-expanded="true"] .menu-ico > span:nth-child(1){
  transform:translateY(5.25px) rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-ico > span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-ico > span:nth-child(3){
  transform:translateY(-5.25px) rotate(-45deg);
}
@media (prefers-reduced-motion:reduce){
  .menu-ico > span{transition:none}
}

/* 7  Links and buttons =====================================================
   Internal navigation uses a restrained button rather than an underlined
   "read about the approach" line. Prose links stay underlined. */

a{color:inherit}

.prose a,.foot a.txt{
  color:var(--deep);
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}

.btn{
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--btn-bg);color:var(--btn-ink);
  font:400 .95rem/1 var(--text);
  padding:15px 22px;
  border:1px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,opacity .2s ease;
}
.btn:hover{opacity:.87}
.btn .arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(3px)}

.btn.quiet{
  background:transparent;color:var(--ink);
  border-color:var(--btn-line);
}
.btn.quiet:hover{background:var(--wash);opacity:1}

.btn.sm{padding:11px 16px;font-size:.88rem}

.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* 8  Objects and figures ===================================================
   The renders are flat-fielded so their ground is the page ground and their
   edges are feathered to transparent. They carry no frame, no border and no
   background. That is deliberate: a framed picture is another box. */

.obj{width:100%;height:auto}

figure{margin:0}

/* Lets an object run past the text column toward the page edge. */
.bleed-r{margin-right:calc(var(--gutter) * -1)}
.bleed-l{margin-left:calc(var(--gutter) * -1)}

/* 9  Sections ==============================================================*/

/* --- Hero --------------------------------------------------------------- */

.hero{
  margin-block:clamp(36px,5vw,78px) var(--rhythm);
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(28px,4vw,72px);
  align-items:center;
}
/* A hero with no artwork beside it. Three pages lost theirs when the
   watercolour set was cut to four pieces. The headline and the passage sit as
   two columns on a shared baseline, the same device the statement uses, rather
   than leaving half the width empty. */
.hero.solo{
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  align-items:end;
}
.hero.solo h1{max-width:14ch}
.hero.solo .lede{max-width:36ch;margin-top:0}
.hero.solo .actions{margin-top:clamp(22px,2.6vw,32px)}

.hero h1 em{font-style:normal;color:var(--deep)}
.hero .lede{margin-top:clamp(20px,2.4vw,34px)}
.hero .actions{margin-top:clamp(26px,3vw,40px)}
.hero figure{margin-right:calc(var(--gutter) * -.55)}

/* --- The sequence: one rule across the top, columns hanging beneath ------ */

.seq{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap);
  border-top:1px solid var(--rule);
  padding-top:clamp(26px,3vw,40px);
}
.seq > li{list-style:none}
.seq h3{margin:.55em 0 .45em}
.seq p{color:var(--ink-2);font-size:.95rem}
.seq-wrap{margin:0;padding:0}

/* --- A long section with a heading that stays put while the body scrolls - */

.split{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(32px,5vw,90px);
  align-items:start;
}
.split > .col-head{
  position:sticky;
  top:clamp(96px,11vh,130px);
}
.split .lede{max-width:28ch}
.col-head .lede{margin-top:clamp(16px,1.8vw,26px)}

/* --- Alternating rows. Asymmetric, no borders, rhythm from margin. ------- */

.row{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(30px,5vw,84px);
  align-items:center;
  margin-block:clamp(72px,9vw,128px);
}
.row:first-of-type{margin-top:clamp(40px,5vw,64px)}
.row.flip > figure{order:2}
.row h3{margin-bottom:.6em}
.row p{color:var(--ink-2)}
.row .eyebrow{margin-bottom:14px}

/* --- The ladder. Rows separated by hairlines, read as set type. ---------- */

.ladder{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.ladder > li{
  display:grid;
  grid-template-columns:auto minmax(0,5fr) minmax(0,5fr);
  gap:clamp(20px,3.4vw,56px);
  align-items:baseline;
  padding-block:clamp(26px,3.2vw,44px);
  border-bottom:1px solid var(--rule);
}
.ladder .num{min-width:1.6em}
.ladder h3{margin-bottom:.4em}
.ladder p{color:var(--ink-2);font-size:.95rem}

/* A stack carrying full entries rather than one line statements. This is what
   the alternating image rows became. Same hairline grouping, no picture. */
.stack.lg > li{padding-block:clamp(32px,4vw,58px)}
.stack.lg h3{margin-bottom:.55em}
.stack.lg p{font-size:1rem;line-height:1.6}
.stack.lg .eyebrow{margin-bottom:14px}
.stack.lg .eyebrow::after{display:none}

/* --- A short list of plain statements, grouped by one rule -------------- */

.stack{
  margin:0;padding:0;list-style:none;
  border-top:1px solid var(--rule);
}
.stack > li{
  padding-block:clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(20px,3.4vw,56px);
  align-items:baseline;
}
.stack h4{font-family:var(--display)}
.stack h4 .n{
  display:block;
  font:400 .72rem/1 var(--text);
  letter-spacing:.15em;
  color:var(--ink-3);
  margin-bottom:.75em;
}
.stack p{color:var(--ink-2);font-size:.95rem}

/* --- The statement ------------------------------------------------------
   Where the burgundy chapter used to be. It has to read as a pause in the page
   without changing the ground, so it does the work with a pair of full-bleed
   hairlines, a larger heading and a lot of air. Same grouping language as
   everywhere else on the site: a rule, not a box. */

.statement{
  margin-block:var(--rhythm-lg);
  padding-block:clamp(62px,7.5vw,112px);
  position:relative;
}
.statement::before,
.statement::after{
  content:"";
  position:absolute;left:50%;width:100vw;margin-left:-50vw;
  height:1px;background:var(--rule);
}
.statement::before{top:0}
.statement::after{bottom:0}

.statement h2{
  font-size:clamp(2.1rem,1.35rem + 2.5vw,3.55rem);
  max-width:18ch;
}
.statement .lede{max-width:44ch;margin-top:clamp(20px,2.4vw,32px)}
.statement .actions{margin-top:clamp(30px,3.4vw,44px)}

/* A statement carrying a heading and a passage sets them as two columns with a
   shared baseline rather than leaving half the width empty. */
.statement-split{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(28px,4.6vw,76px);
  align-items:end;
}
.statement-split h2{max-width:15ch}
.statement-split .lede{max-width:38ch;margin-top:0}
@media (max-width:1000px){
  .statement-split{grid-template-columns:1fr;gap:clamp(22px,3.4vw,34px);align-items:start}
  .statement-split .lede{max-width:46ch}
}

/* --- A reserved slot, standing in for artwork that does not exist yet ----
   Deliberately a box. Everywhere else on the site a border would be the boxiness
   this design removes, which is exactly why a border is right here: the slot has
   to read as reserved space and never as a picture. It keeps the aspect ratio of
   the image that will replace it, so turning the artwork on does not reflow the
   page. */

.ph{
  background:var(--wash);
  border:1px solid var(--rule);
  display:grid;
  align-content:center;
  justify-items:center;
  gap:.5em;
  text-align:center;
  padding:24px;
  color:var(--ink-3);
}
.ph-k{
  font:400 .68rem/1 var(--text);
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ph-t{
  font:400 clamp(1rem,.94rem + .3vw,1.2rem)/1.25 var(--display);
  color:var(--ink);
  letter-spacing:-.008em;
  max-width:18ch;
}
.ph-n{
  font:400 .72rem/1.4 var(--text);
  color:var(--ink-3);
  word-break:break-word;
}

/* --- People ------------------------------------------------------------- */

.people{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(32px,4.5vw,64px);
  border-top:1px solid var(--rule);
  padding-top:clamp(30px,3.6vw,48px);
}
.people h3{margin:1em 0 .2em}
.people .role{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:1em;
}

/* --- Writing cards, which are rules and type, not boxes ----------------- */

.notes{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.notes > li{
  border-bottom:1px solid var(--rule);
  padding-block:clamp(24px,3vw,38px);
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,7fr) minmax(0,2fr);
  gap:clamp(18px,3vw,48px);
  align-items:baseline;
}
.notes h3{margin-bottom:.4em}
.notes p{color:var(--ink-2);font-size:.95rem}
.notes .status{
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);text-align:right;
}

/* --- Contact ------------------------------------------------------------ */

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(34px,5vw,88px);
  align-items:center;
}

/* 10  Footer ================================================================ */

.foot{
  border-top:1px solid var(--rule);
  padding-block:clamp(48px,6vw,78px) clamp(30px,3.4vw,44px);
  margin-top:var(--rhythm-lg);
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr);
  gap:clamp(28px,4vw,60px);
}
.foot h4{
  font-family:var(--text);font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1.1em;
  font-weight:400;
}
.foot ul{margin:0;padding:0;list-style:none}
.foot li{margin-bottom:.62em}
.foot a{color:var(--ink-2);text-decoration:none;font-size:.93rem}
.foot a:hover{color:var(--ink)}
.foot .word{display:block;margin-bottom:1em}
.foot .tower{width:46px;opacity:.9;margin-bottom:18px}
.foot-bottom{
  margin-top:clamp(38px,4.6vw,62px);
  padding-top:22px;
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-size:.82rem;color:var(--ink-3);
}

/* 11  Motion ================================================================
   Everything animated degrades to static. Motion orients and then stops. */

/* Revealed content is visible by default and hidden only once the document
   is known to be running scripts. The class is set by an inline script in the
   head, before first paint, so nothing is drawn and then taken away. A
   deferred script cannot do that: the page can paint first. */
.js .rv{opacity:0;transform:translateY(15px)}
.js .rv.in{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1);
}
.js .rv-1{transition-delay:.07s}
.js .rv-2{transition-delay:.14s}
.js .rv-3{transition-delay:.21s}
.js .rv-4{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 12  Responsive ============================================================ */

@media (max-width:1000px){
  /* .hero.solo is (0,2,0) and .hero is (0,1,0), so the solo rule has to be
     named here or it keeps its two columns all the way down to a phone. */
  .hero,
  .hero.solo{grid-template-columns:1fr;gap:clamp(26px,5vw,44px);align-items:start}
  .hero figure{margin-right:0;max-width:440px}
  .hero .lede,
  .hero.solo .lede{max-width:44ch;margin-top:clamp(20px,2.4vw,34px)}
  .hero.solo h1{max-width:18ch}
  .seq{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(28px,4vw,40px)}
  .split{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .split > .col-head{position:static}
  .split .lede{max-width:46ch}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:820px){
  /* The whole navigation collapses, the invitation included. Carrying the
     wordmark, a menu button and a two word button in a 393px bar wrapped the
     button onto two lines. The hero's own invitation sits just below it. */
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .nav.open{
    display:flex;
    position:absolute;left:0;right:0;top:100%;
    background:var(--ground);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--gutter) 22px;
  }
  .nav.open a:not(.btn){
    display:block;padding:15px 0;font-size:1.05rem;
    border-bottom:1px solid var(--rule);
  }
  .nav.open .btn{margin:18px 0 0;justify-content:center}
  .site-head{position:sticky}
  .row,.row.flip > figure{grid-template-columns:1fr;order:0}
  .row{gap:clamp(22px,4vw,32px)}
  .row figure{max-width:420px}
  .ladder > li{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .ladder > li > :last-child{grid-column:2}
  .stack > li,.notes > li{grid-template-columns:1fr;row-gap:8px}
  .notes .status{text-align:left}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top > :first-child{grid-column:1 / -1}
}

@media (max-width:560px){
  .seq{grid-template-columns:1fr;row-gap:26px}
  .seq > li{border-top:1px solid var(--rule);padding-top:22px}
  .seq{border-top:0;padding-top:0}
  .foot-top{grid-template-columns:1fr}
  .actions .btn{width:100%;justify-content:center}
}