/* ── inner pages ───────────────────────────────────────────────────────
   Everything structural lives in app.css. This file only adds what the
   home page never needed: a short hero, the long-form article layout,
   the priced service boxes, and the enquiry form.                       */

/* ── short hero ────────────────────────────────────────────────────── */
.hero--page{min-height:auto}

/* A page with no hero at all. The hero used to hold two things the sheet
   now has to hold itself: the air under the fixed header, and the -24
   overlap that tucked the sheet under the scalloped cusps — with no
   cusps to tuck under, that overlap would just slide the page up.      */
.sheet.no-hero{margin-top:0;padding-top:calc(110 * var(--u))}

/* ── the head of an inner page ─────────────────────────────────────────
   The copy takes the left, and the right carries one live thing so the
   band is not half a screen of empty sky: the work as a fanned deck, or
   a few of the house objects drifting the way they do in the hero.     */
.page-head{
  --u:calc(min(100vw,var(--shell)) / 1440);
  max-width:var(--shell);margin:0 auto;
  padding:calc(56 * var(--u)) calc(115 * var(--u)) calc(84 * var(--u));
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(500 * var(--u));
  gap:calc(50 * var(--u));
  align-items:center;
}
.page-head h1{width:auto;max-width:calc(760 * var(--u))}
.page-head .lead{width:auto;max-width:calc(620 * var(--u));font-size:calc(20 * var(--u))}

.head-art{position:relative;height:calc(310 * var(--u));justify-self:end;width:100%}

/* ── the deck ──────────────────────────────────────────────────────── */
.head-deck span{
  position:absolute;left:50%;top:50%;
  width:calc(168 * var(--u));height:calc(210 * var(--u));
  margin:calc(-105 * var(--u)) 0 0 calc(-84 * var(--u));
  border-radius:calc(12 * var(--u));
  background:var(--c,#DEDEDE);
  box-shadow:0 calc(18 * var(--u)) calc(36 * var(--u)) rgba(26,78,152,.3);
  transform:translate(calc(var(--x) * var(--u)),calc(var(--y) * var(--u)))
            rotate(calc(var(--r) * 1deg));
  transform-origin:50% 130%;
  transition:transform .65s var(--spring);
}
/* they spread when you come near, like a hand of cards being opened */
.head-deck:hover span{
  transform:translate(calc(var(--x) * 1.22 * var(--u)),calc(var(--y) * 1.3 * var(--u)))
            rotate(calc(var(--r) * 1.5deg));
}

/* ── the drifting objects ──────────────────────────────────────────── */
.head-icons img{
  position:absolute;
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:calc(var(--s,110) * var(--u));height:auto;
  filter:drop-shadow(0 calc(14 * var(--u)) calc(18 * var(--u)) rgba(26,78,152,.26));
  animation:head-float var(--t,8s) ease-in-out var(--d,0s) infinite;
}
@keyframes head-float{
  0%,100%{translate:0 0;rotate:0deg}
  50%    {translate:0 calc(-16 * var(--u));rotate:var(--r,4deg)}
}

/* ── the white sheet every inner page sits on ──────────────────────── */
.wrap{
  --u:calc(min(100vw,var(--shell)) / 1440);
  max-width:var(--shell);margin:0 auto;
  padding:calc(50 * var(--u)) calc(115 * var(--u)) calc(110 * var(--u));
}
.wrap > * + *{margin-top:calc(28 * var(--u))}

/* ── the work grid ─────────────────────────────────────────────────────
   Six covers. Five of them open the project over the page; the sixth is
   the invitation, and just goes to the calendar.                        */
/* Named .work-grid, not .work: app.css already owns .work for the home
   page's drifting strips, and page.css loads second — a page carrying both
   would silently get this grid laid over the strips.                    */
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:calc(46 * var(--u)) calc(34 * var(--u));
  margin-top:calc(10 * var(--u));
}
.work-tile{
  appearance:none;-webkit-appearance:none;border:0;background:none;
  margin:0;padding:0;font:inherit;color:inherit;text-align:left;
  text-decoration:none;cursor:pointer;
  display:block;                         /* the picture is the whole tile */
}
.work-shot{
  position:relative;                     /* the name sits on the picture */
  display:grid;place-items:center;overflow:hidden;
  aspect-ratio:4 / 5;
  border-radius:calc(20 * var(--u));
  background:var(--c,#DEDEDE);
  color:rgba(255,255,255,.7);font-size:calc(15 * var(--u));
  text-align:center;padding:calc(18 * var(--u));
  transition:transform .5s var(--spring),box-shadow .4s ease;
  will-change:transform;
}
.work-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* the same tab the service cards carry, so the two sets read as one */
.work-name{
  position:absolute;left:calc(18 * var(--u));right:calc(18 * var(--u));
  bottom:calc(18 * var(--u));
  background:var(--sky);color:var(--ink);
  border-radius:calc(999 * var(--u));
  padding:calc(15 * var(--u)) calc(26 * var(--u)) calc(17 * var(--u));
  font-weight:300;
  font-size:calc(24 * var(--u));
  line-height:1.2;letter-spacing:-0.03em;
  text-align:left;
}
.work-tile:hover .work-shot,.work-tile:focus-visible .work-shot{
  transform:translateY(calc(-9 * var(--u))) scale(1.012);
  box-shadow:0 calc(24 * var(--u)) calc(48 * var(--u)) rgba(26,78,152,.3);
}
.work-tile:focus-visible{outline:none}
.work-tile:focus-visible .work-shot{
  outline:calc(3 * var(--u)) solid var(--blue);outline-offset:calc(4 * var(--u));
}
.work-tile--open .work-shot{
  background:var(--sky);color:var(--blue);
  border:calc(2 * var(--u)) dashed var(--blue);
  font-family:var(--font-note);font-size:calc(26 * var(--u));
}
/* its tab would vanish into a sky ground, so it takes the paper instead */
.work-tile--open .work-name{background:var(--white);font-family:var(--font)}

/* The footer's scalloped top is a mask, so the notches between the bumps
   show whatever is painted behind them. On the pages that have one, the
   white .sheet wraps the footer and quietly does that job — a project
   page has no sheet, the work runs straight into the footer, and the sky
   the body is painted in was coming up through every notch. Nothing else
   on these pages ever shows the body, so here it takes the paper. */
body:has(.reel){background:var(--white)}

/* ── a project ─────────────────────────────────────────────────────────
   Full-bleed frames, one under the next, and nothing else on the page.
   The writing lives in .pnote, pinned to the right over the work.       */
.reel{display:block;background:var(--white)}
.frame{
  margin:0;display:grid;place-items:center;
  background:var(--c,#DEDEDE);
  color:rgba(255,255,255,.5);
  font-size:calc(16 * var(--u));letter-spacing:-0.03em;
  /* empty, a frame stands in at full height; a photograph sets its own */
  min-height:100svh;
}
.frame:has(img){min-height:0;background:none}
.frame img{width:100%;height:auto;display:block}

/* ── a project as a mosaic ─────────────────────────────────────────────
   The reel above shows one plate per screen. A brand set is the other
   kind of project: a stamp, a pattern, a dozen objects carrying the mark.
   Those want to be seen together, at different sizes, with air between
   them so the eye can tell one piece from the next.

   A band is one row of the mosaic and it owns the height — its
   aspect-ratio sets it and every tile inside stretches to fill. That is
   what keeps a row level whatever shape the photographs underneath
   happen to be cut to; an aspect-ratio per tile drifts out of line the
   moment two pictures in a row disagree.

   Everything here carries the mo- prefix: .tile is already the home
   page's drifting strip, at a fixed 314 × 372.                          */
.reel--mosaic{
  --u:calc(min(100vw,var(--shell)) / 1440);
  --gap:calc(20 * var(--u));            /* the air the whole thing is for */
  --r:calc(16 * var(--u));
  --plate:#182939;                      /* the navy the brand plates print on */
  /* Full-bleed ground, contents still on the 1440 column — the same
     trick .hdr-in uses. Capping the element itself at --shell capped the
     white with it, and on a wide screen the sky the body is painted in
     came up either side of the work. */
  padding:calc(44 * var(--u))
          max(calc(44 * var(--u)),
              calc((100% - var(--shell)) / 2 + 44 * var(--u)))
          calc(100 * var(--u));
  /* Grid, not a column flex: a flex item's height is settled before its
     width is, so aspect-ratio has nothing to measure against and every
     band falls back to the height of the picture inside it. A grid track
     hands the band a definite width first, and the ratio then holds. */
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);
}
.mo-band{display:grid;gap:var(--gap);aspect-ratio:var(--ar,12 / 4)}
/* minmax(0,·) throughout: without it a track refuses to go below the
   picture's own width and the whole row stops adding up. */
.mo-band--full  {grid-template-columns:minmax(0,1fr)}
.mo-band--l     {grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.mo-band--r     {grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.mo-band--half  {grid-template-columns:repeat(2,minmax(0,1fr))}
.mo-band--thirds{grid-template-columns:repeat(3,minmax(0,1fr))}

/* the figure from the middle of the sketch: three small squares in a row
   with a wide strip beneath them, the pair standing beside one tall block */
.mo-stack{
  display:grid;gap:var(--gap);min-height:0;
  grid-template-rows:minmax(0,1.22fr) minmax(0,1fr);
}
.mo-row3{
  display:grid;gap:var(--gap);min-height:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.mo-tile{
  position:relative;margin:0;min-width:0;min-height:0;
  overflow:hidden;border-radius:var(--r);
  /* what a tile shows until its picture is there: a quiet grey, not the
     brand colour — a navy or near-black block turning into a pale
     photograph was most of what read as the page jumping */
  background:#EEF0F2;
}
.mo-tile img,.mo-tile video{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
}
/* and a picture fades up onto its tile as it lands, rather than popping
   in: app.js adds .is-in on load, or at once for one already cached */
.js .mo-tile img,.js .mo-tile video{
  opacity:0;
  transition:opacity .45s ease,transform .7s var(--spring);
}
.js .mo-tile .is-in{opacity:1}
/* A lockup is artwork with its own margins built in — crop it and you
   cut the mark. These sit whole, on the same navy the plate is printed
   on, so the letterboxing reads as the plate rather than as a gap.      */
.mo-tile--plate{background:var(--plate)}
.mo-tile--plate img{object-fit:contain;padding:calc(20 * var(--u))}
/* An artboard drawn on white disappears into the white page, and the
   tile with it. A hairline over it, on top of the picture, gives it back
   its edge — on the navy or the green it would not be needed. */
.mo-tile--line::after{
  content:'';position:absolute;inset:0;
  border:1px solid rgba(0,0,0,.09);border-radius:inherit;
  pointer-events:none;
}

@media (hover:hover){
  .mo-tile img,.mo-tile video{transition:transform .7s var(--spring)}
  .mo-tile:hover img,.mo-tile:hover video{transform:scale(1.035)}
  .mo-tile--plate:hover img{transform:none}   /* a logo does not lean in */
}

/* ── the note ──────────────────────────────────────────────────────────
   Notes, as the app actually looks: the toolbar, the list of notes down
   the left, the note itself on the right. Here the list is the rest of
   the portfolio, so one project leads to the next without ever going
   back out to the grid.                                                 */
.pnote,.pnote-tab{
  position:fixed;right:calc(34 * var(--u));
  top:50%;translate:0 -50%;
  /* above the header: a window you are dragging should be on top of the
     page furniture, though the menu overlay (60) still wins */
  z-index:58;
}
/* Two boxes on purpose. The outer one is only a place to stand: it owns
   the slide in and out. The inner one is the window you actually drag, so
   the two never end up writing to the same property. */
.pnote{
  display:flex;
  transition:translate .5s var(--spring),opacity .3s ease;
}
.pnote.gone,.pnote.tucked{
  translate:calc(100% + 40 * var(--u)) -50%;opacity:0;pointer-events:none;
}
.pnote-win{
  position:relative;
  width:min(calc(700 * var(--u)),calc(100vw - 40px));
  max-height:min(calc(680 * var(--u)),calc(100svh - 260 * var(--u)));
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:calc(13 * var(--u));
  background:var(--white);
  box-shadow:0 calc(26 * var(--u)) calc(70 * var(--u)) rgba(0,0,0,.34);
  transition:translate .4s var(--spring);
}
/* under the hand it must not lag behind the pointer */
.pnote-win.dragging{transition:none}

/* ── toolbar ───────────────────────────────────────────────────────── */
.pnote-bar{
  flex:none;display:flex;align-items:center;gap:calc(16 * var(--u));
  height:calc(50 * var(--u));padding:0 calc(15 * var(--u));
  background:#F4F4F4;
  border-bottom:1px solid rgba(0,0,0,.1);
  cursor:grab;user-select:none;-webkit-user-select:none;
}
.pnote-win.dragging .pnote-bar{cursor:grabbing}
.pnote-side{
  appearance:none;-webkit-appearance:none;
  border:1px solid rgba(0,0,0,.12);border-radius:calc(7 * var(--u));
  background:var(--white);color:#4A4A4A;cursor:pointer;
  padding:calc(4 * var(--u)) calc(7 * var(--u));
  display:grid;place-items:center;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.pnote-side svg{display:block;width:calc(20 * var(--u));height:auto}
.pnote-side:hover{background:#FAFAFA}
.pnote-app{display:grid;line-height:1.15}
.pnote-app b{font-weight:700;font-size:calc(16 * var(--u));letter-spacing:-0.02em;color:#1D1D1F}
.pnote-app span{font-weight:300;font-size:calc(12 * var(--u));letter-spacing:-0.02em;color:#8A8A8E}

/* ── the two panes ─────────────────────────────────────────────────── */
.pnote-panes{flex:1;min-height:0;display:flex}
.pnote-list{
  flex:none;width:calc(230 * var(--u));
  overflow:auto;
  padding:calc(6 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
  background:#F7F7F7;
  border-right:1px solid rgba(0,0,0,.1);
  transition:width .35s var(--spring),opacity .25s ease;
}
.pnote.folded .pnote-list{width:0;opacity:0;padding-left:0;padding-right:0;border-right:0}
.pnote-group{
  margin:calc(10 * var(--u)) 0 calc(4 * var(--u)) calc(8 * var(--u));
  font-weight:700;font-size:calc(15 * var(--u));letter-spacing:-0.03em;color:#1D1D1F;
}
.pnote-row{
  display:block;text-decoration:none;
  padding:calc(9 * var(--u)) calc(10 * var(--u));
  border-radius:calc(8 * var(--u));
  border-top:1px solid rgba(0,0,0,.08);
}
.pnote-row:first-of-type{border-top:0}
.pnote-row b{
  display:block;font-weight:700;font-size:calc(14 * var(--u));
  line-height:1.25;letter-spacing:-0.02em;color:#1D1D1F;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* The preview line lists what was done on the project, and the longest of
   them is twice the width of this column — on one nowrap line it was cut
   after "Brand Strategy · Design". Up to three lines, so every list shows
   whole; the rows end up different heights, which is what a list of real
   previews looks like anyway. */
.pnote-row span{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  margin-top:calc(2 * var(--u));
  font-weight:300;font-size:calc(12.5 * var(--u));
  line-height:1.3;letter-spacing:-0.02em;color:#86868B;
  overflow:hidden;
}
.pnote-row:hover{background:rgba(0,0,0,.045)}
/* the one you are reading, in the house blue rather than Notes' yellow */
.pnote-row[aria-current="page"]{background:var(--sky);border-top-color:transparent}
.pnote-row[aria-current="page"] + .pnote-row{border-top-color:transparent}
.pnote-row[aria-current="page"] span{color:#4A6C93}
.pnote-row:focus-visible{outline:calc(2 * var(--u)) solid var(--blue);outline-offset:calc(-2 * var(--u))}

/* ── the note itself ───────────────────────────────────────────────── */
.pnote-body{
  flex:1;min-width:0;overflow:auto;
  padding:calc(26 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
}
.pnote-body h1{
  margin:0;font-weight:700;font-size:calc(27 * var(--u));
  line-height:1.15;letter-spacing:-0.03em;
}
/* The note is the Notes app, so it should read in the app's own voice:
   one plain face all the way down, and bold wherever something is being
   named. The display italic that used to set the headings and the quote
   was the website talking over it.                                      */
.pnote-lbl{
  margin:calc(17 * var(--u)) 0 0;
  font-weight:700;font-size:calc(16 * var(--u));
  line-height:1.4;letter-spacing:-0.03em;
}
/* Services as the app's own checklist. #FCB827 is the amber Notes
   actually ticks with, sampled off a screenshot of the real thing —
   the tick rides on the disc as a background, so there is nothing to
   line up and nothing extra in the markup.                             */
.pnote-svc{
  list-style:none;margin:calc(9 * var(--u)) 0 0;padding:0;
  display:grid;gap:calc(7 * var(--u));
}
.pnote-svc li{
  display:flex;align-items:center;gap:calc(8 * var(--u));
  font-weight:300;font-size:calc(16 * var(--u));
  line-height:1.35;letter-spacing:-0.03em;
}
.pnote-svc li::before{
  content:"";flex:none;
  width:calc(19 * var(--u));height:calc(19 * var(--u));border-radius:50%;
  background:#FCB827
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1.7 5.7 5.3 9.2 12.3 1.9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / calc(11 * var(--u)) auto no-repeat;
}
.pnote-body p{
  margin:calc(16 * var(--u)) 0 0;
  font-weight:300;font-size:calc(16 * var(--u));
  line-height:1.5;letter-spacing:-0.03em;
}
.pnote-body h2{
  margin:calc(22 * var(--u)) 0 0;
  font-weight:700;font-size:calc(17 * var(--u));
  line-height:1.3;letter-spacing:-0.03em;
}
.pnote-body h2 + p{margin-top:calc(6 * var(--u))}
.pnote-body blockquote{
  margin:calc(24 * var(--u)) 0 0;
  padding:calc(16 * var(--u)) calc(18 * var(--u));
  background:var(--sky);border-radius:calc(8 * var(--u));
  font-weight:300;font-size:calc(16 * var(--u));
  line-height:1.45;letter-spacing:-0.03em;
}
.pnote-body blockquote cite{
  display:block;margin-top:calc(10 * var(--u));
  font-style:normal;font-weight:700;
  font-size:calc(14 * var(--u));letter-spacing:-0.03em;opacity:.7;
}

/* Closed, the note is a single tile left leaning against the right edge.
   It is not there when the page opens: it slides in once you have started
   scrolling, then bounces the way an app bounces in the Dock until you
   have opened it once. Position rides on `translate`, the bounce on the
   icon inside, so the two never fight over the same property. */
.pnote-tab{
  appearance:none;-webkit-appearance:none;border:0;padding:0;background:none;
  width:calc(72 * var(--u));height:calc(72 * var(--u));cursor:pointer;
  border-radius:calc(16 * var(--u));      /* 22.4% — the Big Sur icon radius */
  --tip-gap:calc(14 * var(--u));
  rotate:-8deg;
  opacity:0;translate:calc(130 * var(--u)) -50%;pointer-events:none;
  transition:opacity .4s ease,translate .6s var(--spring),
             rotate .4s var(--spring),transform .34s var(--spring);
}
.pnote-tab[hidden]{display:none}
/* The shadow belongs to the icon, not to the button. The bounce moves the
   icon and its badge; with the shadow on the button it stayed on the
   ground while the icon hopped away from it, and read as a piece of the
   tile left behind. */
.pnote-tab img{
  display:block;width:100%;height:100%;border-radius:inherit;
  box-shadow:0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.34);
}
.pnote-tab.shown{opacity:1;translate:0 -50%;pointer-events:auto}
/* it straightens up when you reach for it */
.pnote-tab:hover,.pnote-tab:focus-visible{rotate:0deg;transform:scale(1.08)}
.pnote-tab.shown:not(.seen) img,
.pnote-tab.shown:not(.seen) .sv-badge{animation:note-bounce 4s ease-in-out 1.1s infinite}
@keyframes note-bounce{
  0%,64%,100%{translate:0 0}
  70%{translate:0 calc(-19 * var(--u))}
  78%{translate:0 0}
  84%{translate:0 calc(-8 * var(--u))}
  90%{translate:0 0}
}
.pnote-tab.tucked{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .pnote,.pnote-tab{transition:none}
  .js .mo-tile img,.js .mo-tile video{transition:none}
  .pnote-tab.shown:not(.seen) img,
  .pnote-tab.shown:not(.seen) .sv-badge{animation:none}
  .head-icons img{animation:none}
  .head-deck span{transition:none}
  .work-shot,.svc-card{transition:none}
}

/* ── priced service boxes ──────────────────────────────────────────── */
/* Half the box is the writing, half is the picture. The two columns are
   one grid rather than a wrapper, so every .box > rule below still finds
   its element. The picture spans every row and stretches, which is what
   makes it grow along with an accordion as it opens — no script, the row
   simply gets taller and the image comes with it. */
.box{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:calc(50 * var(--u));
  row-gap:0;                             /* the children keep their own margins */
  align-items:start;
  background:var(--white);
  border:calc(2 * var(--u)) solid var(--blue);
  border-radius:calc(20 * var(--u));
  padding:calc(56 * var(--u));
  margin-top:calc(70 * var(--u));
}
.box > *{grid-column:1;min-width:0}
.box-shot{
  /* `1 / -1` would look right and do nothing: -1 counts back from the end
     of the *explicit* grid, and there is none here — the rows are implicit,
     one per child, so it collapses to row 1. Spanning a count larger than
     any box will ever hold is what actually reaches the bottom; the surplus
     tracks are empty and, with row-gap 0, take up nothing. */
  grid-column:2;grid-row:1 / span 40;align-self:stretch;
  display:grid;place-items:center;overflow:hidden;
  border-radius:calc(20 * var(--u));
  background:var(--sky);
  color:rgba(26,78,152,.55);
  font-size:calc(15 * var(--u));letter-spacing:-0.03em;text-align:center;
  padding:calc(18 * var(--u));
}
.box-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* The split is for a box that has a picture to put in the other half.
   The FAQ borrows the card and not the layout — with nothing in
   column two it was leaving half the card empty — so a box with no
   picture in it is simply one column wide. */
.box:not(:has(.box-shot)){grid-template-columns:minmax(0,1fr)}
.wrap > .box:first-child{margin-top:calc(20 * var(--u))}
.box > h2{
  margin:0;font-size:calc(40 * var(--u));font-weight:700;
  line-height:1.2;letter-spacing:-0.03em;
}
.box > p{
  margin:calc(22 * var(--u)) 0 0;
  font-weight:300;font-size:calc(20 * var(--u));
  line-height:1.45;letter-spacing:-0.03em;
}
.box .cta{margin-top:calc(44 * var(--u))}
/* Plain and bold, not the handwritten blue: this line states a condition of
   the service, so it belongs to the copy rather than to the asides. Needs to
   outrank `.box > p`, which is what actually sets the size and weight here. */
.box > .note--plain{font-family:var(--font);font-weight:700;color:var(--ink)}

.note{
  margin-top:calc(24 * var(--u));
  font-family:var(--font-note);
  font-size:calc(28 * var(--u));line-height:1.25;letter-spacing:-0.02em;
  color:var(--blue);
}

/* ── company details ───────────────────────────────────────────────────
   The registration lines, two to a row. A definition list because that is
   what it is — a label and the thing it labels — and the <div> around each
   pair is what lets the grid treat them as one cell.                     */
.regs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:calc(30 * var(--u)) calc(50 * var(--u));
  margin-top:calc(34 * var(--u));
}
.regs dt{
  margin-bottom:calc(7 * var(--u));
  font-weight:300;font-size:calc(15 * var(--u));
  letter-spacing:-0.03em;color:#86868B;
}
.regs dd{
  margin:0;font-weight:300;font-size:calc(21 * var(--u));
  line-height:1.4;letter-spacing:-0.03em;
}
.regs a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(26,78,152,.35)}
.regs a:hover,.regs a:focus-visible{border-bottom-color:var(--blue);color:var(--blue)}

/* the accordion is reused as-is, just no longer 485 wide */
.acc--wide{width:100%;margin-top:calc(18 * var(--u))}
.acc--wide .acc-head{font-size:calc(30 * var(--u))}
.tick{margin-left:calc(12 * var(--u));vertical-align:-18%;height:calc(44 * var(--u));width:auto}

/* One column, always. Two columns made the reading order a puzzle — the
   eye has to run down the left, come back up, and run down the right —
   and a long item wrapped to three lines in half the width.            */
.spec{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:calc(12 * var(--u));
  margin:calc(22 * var(--u)) 0 0;padding:0;list-style:none;
}
.spec li{
  position:relative;padding-left:calc(20 * var(--u));
  font-weight:300;font-size:calc(18 * var(--u));
  line-height:1.5;letter-spacing:-0.03em;
}
.spec li::before{
  content:'';position:absolute;left:0;top:calc(11 * var(--u));
  width:calc(8 * var(--u));height:calc(8 * var(--u));
  border-radius:50%;background:var(--blue);
}
/* Inside an accordion the FAQ's own rules land on these too: `.acc-inner ul`
   zeroes the margin and `.acc-inner li` adds 24 below every item. Both out-
   rank a bare `.spec`, so the list restates its own spacing from here.   */
.acc-inner .spec{margin-top:calc(22 * var(--u))}
.acc-inner .spec li{margin-bottom:0}

.price{
  margin:calc(24 * var(--u)) 0 0;
  font-weight:700;font-size:calc(20 * var(--u));letter-spacing:-0.03em;
  color:var(--blue);
}

/* ── about ────────────────────────────────────────────────────────── */
.bio{
  display:grid;grid-template-columns:calc(420 * var(--u)) 1fr;
  gap:calc(70 * var(--u));align-items:start;
}
.bio-photo{
  aspect-ratio:1;border-radius:50%;
  background:var(--sky);display:grid;place-items:center;
  text-align:center;padding:calc(28 * var(--u));
  font-size:calc(16 * var(--u));color:var(--blue);
}
/* Square, whatever shape the picture is: a 4:5 portrait at height:100%
   kept its own height, pushed the circle out to 420 × 511 and rounded
   itself into an oval. */
.bio-photo img,.bio-photo video{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;display:block}
.bio p{
  margin:0 0 calc(22 * var(--u));
  font-weight:300;font-size:calc(20 * var(--u));
  line-height:1.5;letter-spacing:-0.03em;
}

/* ── the enquiry form ──────────────────────────────────────────────── */
.form{margin-top:calc(60 * var(--u));display:grid;gap:calc(34 * var(--u))}
.field{display:grid;gap:calc(10 * var(--u))}
.field > span{
  font-weight:300;font-size:calc(20 * var(--u));letter-spacing:-0.03em;
}
.field > span em{display:block;font-style:italic;font-size:calc(16 * var(--u));opacity:.7}
.field input,.field textarea{
  font-family:inherit;font-weight:300;font-size:calc(18 * var(--u));
  letter-spacing:-0.03em;color:var(--ink);
  padding:calc(14 * var(--u)) calc(18 * var(--u));
  background:var(--white);
  border:calc(2 * var(--u)) solid var(--sky);
  border-radius:calc(10 * var(--u));
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue)}
.field textarea{min-height:calc(120 * var(--u));resize:vertical}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:calc(34 * var(--u))}

/* two columns of checkboxes, as the brief asks */
.opts{
  display:grid;grid-template-columns:1fr 1fr;
  gap:calc(10 * var(--u)) calc(34 * var(--u));
  margin:0;padding:0;border:0;
}
.opts legend{
  padding:0;margin-bottom:calc(14 * var(--u));
  font-weight:300;font-size:calc(20 * var(--u));letter-spacing:-0.03em;
}
.opts > legend{grid-column:1 / -1}
.opt{
  display:flex;align-items:center;gap:calc(12 * var(--u));
  font-weight:300;font-size:calc(18 * var(--u));letter-spacing:-0.03em;
  cursor:pointer;
}
.opt input{
  flex:none;appearance:none;-webkit-appearance:none;
  width:calc(22 * var(--u));height:calc(22 * var(--u));
  border:calc(2 * var(--u)) solid var(--blue);border-radius:calc(6 * var(--u));
  background:var(--white);cursor:pointer;
}
.opt input[type=radio]{border-radius:50%}
.opt input:checked{background:var(--blue);box-shadow:inset 0 0 0 calc(3 * var(--u)) var(--white)}
.opt input:focus-visible{outline:calc(3 * var(--u)) solid var(--blue);outline-offset:calc(2 * var(--u))}

/* ── phones ────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .sheet.no-hero{margin-top:0;padding-top:74px}
  .page-head{
    --u:1px;padding:18px 22px 56px;
    grid-template-columns:1fr;gap:14px;
  }
  /* the visual first, then the copy, as on the home page */
  .head-art{order:-1;height:190px;justify-self:stretch}
  /* the same fan, drawn in tighter so it fits a phone rather than
     running off both edges */
  .head-deck span{
    width:104px;height:130px;margin:-65px 0 0 -52px;
    transform:translate(calc(var(--x) * .6px),calc(var(--y) * .8px))
              rotate(calc(var(--r) * 1deg));
  }
  .head-deck:hover span{
    transform:translate(calc(var(--x) * .6px),calc(var(--y) * .8px))
              rotate(calc(var(--r) * 1deg));
  }
  .head-icons img{width:calc(var(--s,110) * .62px)}
  .page-head h1{font-size:clamp(24px,5.7vw,38px)}
  .page-head .lead{font-size:clamp(16px,4.2vw,19px)}
  .wrap{--u:1px;padding:34px 22px 60px}
  .work-grid{grid-template-columns:1fr;gap:30px}
  .work-name{
    font-size:clamp(19px,4.8vw,24px);
    left:14px;right:14px;bottom:14px;padding:12px 22px 14px;
  }

  /* the note stops floating and becomes a sheet off the bottom edge */
  .frame{min-height:62svh}

  /* On a phone a band is a column: the bands stop setting the height and
     each tile carries its own shape instead. The one row that is about
     being small — the three objects over the pattern strip — keeps
     standing side by side, since stacking it would only make it big.    */
  .reel--mosaic{--u:1px;--gap:10px;--r:14px;padding:16px 14px 60px}
  .mo-band,.mo-stack{grid-template-columns:minmax(0,1fr);aspect-ratio:auto}
  .mo-stack{grid-template-rows:auto auto}
  .mo-tile{aspect-ratio:3 / 2}
  .mo-tile--sq{aspect-ratio:1}
  .mo-tile--tall{aspect-ratio:3 / 4}
  .mo-tile--strip{aspect-ratio:12 / 4}
  .mo-tile--plate{aspect-ratio:16 / 9}
  .mo-tile--plate img{padding:14px}

  .pnote,.pnote-tab{right:14px}
  /* the list's small print, readable at arm's length */
  .pnote-app span,.pnote-row span{font-size:14px}
  .pnote{top:auto;bottom:0;left:0;right:0;translate:0 0}
  .pnote-win{
    width:100%;max-height:64svh;
    border-radius:16px 16px 0 0;
  }
  .pnote-bar{cursor:default}
  /* one pane at a time, the way Notes does it on a phone: the list slides
     over the note rather than sitting beside it, and starts out of the way */
  .pnote-list{
    position:absolute;inset:50px 0 0;width:auto;z-index:2;
    transition:translate .35s var(--spring);
  }
  .pnote.folded .pnote-list{
    width:auto;opacity:1;padding:6px 8px 14px;
    translate:-100% 0;border-right:0;
  }
  .pnote.gone,.pnote.tucked{translate:0 100%}
  .pnote-tab{top:auto;bottom:16px;width:56px;height:56px;border-radius:13px;translate:0 110px}
  .pnote-tab.shown{translate:0 0}
  .pnote-tab.tucked{translate:0 110px}
  /* one column on a phone: the picture drops under the writing and takes
     a shape of its own, since there is no neighbouring column to match */
  .box{padding:26px;grid-template-columns:1fr;row-gap:0}
  .box-shot{
    grid-column:1;grid-row:auto;
    margin-top:30px;aspect-ratio:4 / 3;border-radius:16px;
  }
  .box > h2{font-size:clamp(24px,6vw,32px)}
  .regs{grid-template-columns:1fr;gap:20px;margin-top:24px}
  .regs dd{font-size:18px}
  /* The discovery-call button carries a sentence, not a word, and .cta is a
     fixed-height box with overflow:hidden — so anything too wide is cut, not
     wrapped. On a phone let it take the height it needs. */
  .box > .cta{height:auto;min-height:50px;padding:13px 22px;line-height:1.3;text-align:center}
  /* .cta .label is nowrap so a button label never breaks mid-phrase; this
     one is a whole sentence and has to. */
  .box > .cta .label{white-space:normal}
  .acc--wide .acc-head{font-size:clamp(20px,5vw,26px)}
  .opts,.pair{grid-template-columns:1fr}
  .bio{grid-template-columns:1fr;gap:30px}
  .bio-photo{max-width:260px}
}