/* ============================================================
   Obra — obramade.com
   One design. Light was a comparison variant and has been retired.

   The language, in short: flat planes of saturated colour meeting on
   hard edges, light and shadow photographed rather than drawn, and the
   discipline of a drawing — hairlines, measured labels, a lot of empty.
   ============================================================ */

:root{
  /* plaster and stone */
  --cal:#F0E9DC;
  --cal-hi:#FAF7F0;
  --cal-sink:#E5DCCB;
  --rosa:#CC3967;
  --barro:#9C5535;
  /* --barro clears AA on --cal (4.62:1) but not on the darker --cal-sink,
     where it drops to 4.1:1. This is the same terracotta 7% deeper, for
     label text sitting on a sunk panel: 4.61:1 there. */
  --barro-sink:#904F31;
  /* Annotation ink, 4.62:1 on the drafting ground. Was scoped to Plan
     mode; now the drawing is always on the page, so it is a token. */
  --plan-ink:#5A6443;
  /* Each cell of the index owns a colour, so the page you are standing in
     has a reason to be the colour it is. Before this the palette had 15
     tokens and no rule left once the architecture story went. */
  --accent:var(--rosa);
  --bermellon:#E8503A;
  --verde:#6E7A52;
  --tezontle:#3B242A;
  --sombra:#1C1419;
  /* sampled from the hero photograph so the plane can continue its sky */
  --cielo:#719CD2;
  --cielo-high:#3272BD;

  --ink:#241C1F;
  --ink-2:#5A4C50;
  --ink-3:#726567;
  --rule:rgba(36,28,31,.18);
  --rule-soft:rgba(36,28,31,.1);

  /* Display is a monospace set large. Fraunces and Newsreader were a literary
     pairing — 70% of the readable text on the page was serif, which filed a
     software studio under magazine no matter what the words said. Martian Mono
     is already paid for, unusually wide, and at headline size it reads as a
     system rather than a novel. */
  --display:"Martian Mono",ui-monospace,Menlo,monospace;
  --display-wght:600;
  --display-track:-.04em;
  --display-vf:normal;

  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
}

/* The page says which cell of the index it is, and the accent follows. The lit
   cell in the solid and the page's own colour are then the same fact stated
   twice, rather than two unrelated decisions.
   This has to be its own complete rule after :root closes — folding it in by
   hand closed :root early and swallowed every token declared below it, which
   left the homepage with no typefaces and no ink. */
html[data-cell="3"]{--accent:#A75B39;

  --gutter:clamp(20px,4.5vw,64px);
  --wrap:1240px;
  --nav-h:68px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* The old stylesheet had these and the rewrite lost them: anchor clicks were
   jumping instantly instead of gliding, which is what made scrolling feel
   rough. clip rather than hidden, so body does not become a scroll container. */
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
#work,#studio,#contact,#start{scroll-margin-top:24px;}
body{background:var(--cal);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;}
img{display:block;max-width:100%;}
::selection{background:var(--rosa);color:var(--cal-hi);}
a:focus-visible,button:focus-visible{outline:2px solid var(--rosa);outline-offset:3px;}

.wrap{max-width:var(--wrap);margin:0 auto;}
.label{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);margin:0;}

/* ---------- nav ---------- */
.nav{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:0 var(--gutter);border-bottom:1px solid var(--rule);
  background:var(--cal);position:relative;z-index:5;}
.brand{text-decoration:none;color:var(--ink);font-family:var(--display);
  font-weight:var(--display-wght);font-variation-settings:var(--display-vf);
  font-size:25px;letter-spacing:.015em;text-transform:uppercase;line-height:1;}
.nav__mid{display:flex;align-items:center;gap:26px;}
.nav__mid a{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:4px 0;border-bottom:1px solid transparent;}
.nav__mid a:hover{color:var(--ink);border-bottom-color:var(--ink);}
.nav__end{display:flex;align-items:center;gap:10px;}
.nav__tel{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--ink);
  text-decoration:none;border:1px solid var(--ink);padding:10px 13px;white-space:nowrap;}
.nav__tel:hover{background:var(--ink);color:var(--cal);}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.06fr .94fr;min-height:calc(100svh - var(--nav-h));}

/* the wall: brand colour, with a photographed cast shadow multiplied over it.
   Keeps our rosa, gains a real penumbra and the grain of the plaster. */
/* The plaster photograph is gone. It was the most literal piece of the
   architecture reference and it carried no information — a wall has nothing
   under it to reveal, which is why drawing it as characters never read as
   anything. The colour stays, because the colour is the brand; the picture
   was the costume. */
.hero__l{
  background-color:var(--rosa);
  color:var(--cal-hi);
  display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;
  padding:clamp(40px,6vw,96px) clamp(30px,5vw,80px) clamp(44px,6vw,92px);
}
/* The same wall as the homepage, in a different colour — a different room in
   the same building; the photographed shadow and sun position carry over.
   A literal rather than --barro: this is plaster, not ink, and the two have
   different jobs. Terracotta at #B0603C left the 10.5px eyebrow at 4.28:1
   against cal-hi, under AA's 4.5, at every sun position; this measures
   4.67:1 and is the same colour to the eye. */
.hero--voice .hero__l{background-color:#A75B39;}
.hero__l > *{position:relative;z-index:1;}
/* The first screen is the pair: the wall as photographed, and the same file
   drawn beside it. Labelling both is what makes the relationship read. */
.hero__tag{position:absolute;bottom:0;left:0;z-index:4;
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  padding:5px 10px;}
.hero__tag--plan{background:var(--cal-sink);color:var(--plan-ink);}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(250,247,240,.72);margin:0 0 clamp(20px,3vw,34px);}
.hero__t{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);
  font-size:clamp(24px,3.4vw,46px);line-height:.92;letter-spacing:var(--display-track);
  text-transform:uppercase;margin:0 0 clamp(16px,2vw,24px);max-width:12ch;text-wrap:balance;}
.hero__p{font-size:clamp(16px,1.5vw,19px);line-height:1.52;color:rgba(250,247,240,.9);
  margin:0 0 clamp(24px,3vw,38px);max-width:36ch;}
.hero__caps{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(250,247,240,.78);margin:0 0 clamp(20px,2.6vw,30px);
  display:flex;flex-wrap:wrap;gap:4px 10px;}
.hero__caps i{font-style:normal;color:rgba(250,247,240,.45);}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px;}

.btn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 22px;text-decoration:none;border:1px solid transparent;display:inline-block;
  background:transparent;
  transition:background .18s ease,color .18s ease;}
.btn--a{background:var(--sombra);color:var(--cal-hi);}
.btn--a:hover{background:var(--cal-hi);color:var(--sombra);}
.btn--b{border-color:rgba(250,247,240,.55);color:var(--cal-hi);}
.btn--b:hover{background:rgba(250,247,240,.14);}
/* <button> brings a UA background and radius that <a> does not; .btn's own
   transparent background clears it while leaving the variants free to set one. */
button.btn{border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.btn--light{background:var(--sombra);color:var(--cal-hi);}
.btn--light:hover{background:var(--cal-hi);color:var(--sombra);}
.btn--outline{border-color:rgba(250,247,240,.5);color:var(--cal-hi);}
.btn--outline:hover{background:rgba(250,247,240,.14);}

/* the photograph, bottom-aligned, with the plane continuing its own sky upward */
/* Flat --cielo rather than a gradient. The gradient only reached its end
   colour at the bottom of the plane, never where the photograph actually
   begins, so the join showed as a line at short viewport heights. A solid
   fill matches the photo's top row exactly and the seam disappears. */
.hero__r{position:relative;overflow:hidden;
  background-color:var(--cielo);
  background-image:url('img/esquina.webp');
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:100% auto;}

.plaque{position:absolute;left:0;right:0;bottom:0;background:rgba(28,20,25,.55);
  padding:13px clamp(16px,2.4vw,26px);display:flex;flex-wrap:wrap;gap:4px 24px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(240,233,220,.9);}

/* ---------- section heads ---------- */
.work__head{padding:clamp(80px,12vw,180px) var(--gutter) clamp(34px,5vw,64px);
  max-width:var(--wrap);margin:0 auto;}
.work__h{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);
  font-size:clamp(18px,2.31vw,30px);line-height:.95;letter-spacing:var(--display-track);
  text-transform:uppercase;margin:14px 0 0;max-width:14ch;}

/* ---------- work ----------
   Not three equal rows. The product we run the studio on leads at full
   width; the two client projects sit beneath it, side by side and
   smaller. Unequal weight is the whole point — three identical panels is
   what made this read as a template. */
.work{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) clamp(60px,9vw,130px);}

/* ---------- the as-built pair ----------
   A project is the drawing and the thing that got built, side by side, with
   the spec and the revision note under them. Both states are always on, so
   the story reads in one pass instead of behind a toggle. */
.job__shot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px);}
.job__shot > *{min-width:0;}
.shot{position:relative;margin:0;background:var(--cal-sink);overflow:hidden;}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;}
.shot--plan{background:var(--cal-sink);border:1px dashed rgba(110,122,82,.5);}
.shot--built{border:1px solid var(--rule);}
.shot pre{position:absolute;inset:0;margin:0;overflow:hidden;white-space:pre;
  font-family:var(--mono);line-height:1;color:var(--verde);
  font-variant-ligatures:none;pointer-events:none;}
.shot figcaption{position:absolute;left:0;bottom:0;z-index:3;
  font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
  padding:4px 8px;background:var(--cal);color:var(--ink-2);}
.shot--plan figcaption{background:var(--cal-sink);color:var(--plan-ink);}
.job__kick{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--barro);margin:0 0 10px;}
.job__t{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);line-height:.98;letter-spacing:var(--display-track);
  text-transform:uppercase;margin:0 0 14px;}
.job__p{line-height:1.55;color:var(--ink-2);margin:0;}

/* lead project */
.job--lead{margin-bottom:clamp(44px,6vw,86px);}
.job--lead .shot{aspect-ratio:2.16/1;}
/* the Current shot is 2.16:1, so the slot matches it and nothing is cropped */
.job--lead .job__body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);padding-top:clamp(22px,3vw,38px);align-items:start;}
.job--lead .job__t{font-size:clamp(19px,2.45vw,33px);}
.job--lead .job__p{font-size:17px;max-width:46ch;}

/* the two client projects */
.job-pair{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,52px);}
@media (max-width:1080px){.job-pair{grid-template-columns:1fr 1fr;}}
.job--small .shot{aspect-ratio:4/3;}
.job--small .job__t{font-size:clamp(14px,1.56vw,19px);margin-top:clamp(18px,2.4vw,28px);}
.job--small .job__p{font-size:15.5px;max-width:40ch;}

/* the plate a finished building carries — engraved, not a spec table.
   Left-aligned, tight, one rule above and none between. */
/* The build note used to live only in Plan, behind a toggle most visitors
   never press. It is the strongest evidence on the page — what a job cost,
   what was decided, what was taken out — so it reads in Built too. Plan still
   draws from the same data-note, so there is one source for the text. */
.job__note{margin:18px 0 0;max-width:62ch;
  font-family:var(--mono);font-size:12px;line-height:1.75;color:var(--ink-2);
  background:var(--cal-sink);border-left:2px solid var(--barro);padding:13px 15px;}
.job__note b{display:block;font-weight:500;font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--barro-sink);margin-bottom:7px;}
/* In Plan the note is already drawn by the layer, so the in-flow copy stands
   down rather than printing the same sentence twice on the sheet. */

.plate{margin:22px 0 0;border-top:1px solid var(--ink);padding-top:14px;
  display:grid;grid-template-columns:auto auto;justify-content:start;gap:7px 24px;
  max-width:380px;}
.plate dt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0;padding-top:3px;}
.plate dd{margin:0;font-size:15px;color:var(--ink);line-height:1.35;}
/* a credited collaborator gets a real link, underlined so it reads as one */
.plate dd a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--rule);}
.plate dd a:hover{text-decoration-color:var(--ink);}

/* ---------- studio ----------
   The most human section on the site, so it is given the most air and the
   fewest devices. The six-row fact table that used to sit here was the
   same spec-sheet reflex as the work plates; it has gone. */
.studio{background:var(--cal-hi);border-top:1px solid var(--rule);
  padding:clamp(80px,12vw,180px) var(--gutter);}
.studio__in{max-width:960px;margin:0 auto;}
.studio__h{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);
  font-size:clamp(19px,2.72vw,37px);line-height:.98;letter-spacing:var(--display-track);
  text-transform:uppercase;margin:16px 0 clamp(28px,4vw,48px);max-width:17ch;text-wrap:balance;}
.studio__p{font-size:clamp(17px,1.5vw,19.5px);line-height:1.62;color:var(--ink-2);
  margin:0 0 20px;max-width:56ch;}
.studio__p b{color:var(--ink);font-weight:400;
  box-shadow:inset 0 -.42em 0 rgba(206,58,104,.22);}
.sig{margin-top:clamp(34px,5vw,60px);padding-top:18px;border-top:1px solid var(--ink);
  display:inline-block;}
.sig strong{display:block;font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:24px;letter-spacing:.01em;
  text-transform:uppercase;line-height:1;}
.sig span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px;}

/* ---------- contact — closes on the wall colour it opened on ---------- */
.contact{background:var(--rosa);color:var(--cal-hi);
  padding:clamp(80px,12vw,180px) var(--gutter);}
.contact__in{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:end;}
.contact .label{color:rgba(250,247,240,.6);}
.contact__h{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);
  font-size:clamp(20px,3.13vw,42px);line-height:.93;letter-spacing:var(--display-track);
  text-transform:uppercase;margin:14px 0 0;max-width:12ch;text-wrap:balance;}
.contact__p{font-size:17px;line-height:1.55;color:rgba(250,247,240,.88);margin:0 0 26px;max-width:40ch;}
.contact__cta{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:26px;}
.contact__terms{display:grid;border-top:1px solid rgba(250,247,240,.4);}
.contact__terms div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px solid rgba(250,247,240,.2);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,247,240,.82);}

.foot{background:var(--sombra);color:rgba(240,233,220,.5);padding:20px var(--gutter);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;}
.foot a{color:inherit;text-decoration:none;}
.foot a:hover{color:var(--cal-hi);}

/* ============================================================
   PLAN MODE — the drawing under the building
   ============================================================ */
/* The photograph, redrawn. One glyph per cell, verde on the drafting ground. */
.plan-ascii{position:absolute;inset:0;margin:0;overflow:hidden;pointer-events:none;
  font-family:var(--mono);line-height:1;white-space:pre;color:var(--plan,var(--verde));
  font-variant-ligatures:none;z-index:2;}
.shot--plan .plan-ascii{color:var(--verde);}
/* The hero's right plane is a stage for the solid, not a photograph. */
.hero__r{background-image:none;background-color:var(--cal-sink);}
.solid{position:absolute;inset:0;margin:0;overflow:hidden;pointer-events:none;
  white-space:pre;font-family:var(--mono);line-height:1;color:var(--verde);
  font-variant-ligatures:none;z-index:1;}

/* The title block is no longer a mode's furniture — the drawing is always on
   the page now, so the sheet always has a title block. It ends the page
   rather than floating over it. */
#title-block{display:block;background:var(--cal-sink);
  padding:clamp(18px,3vw,30px) var(--gutter);
  border-top:1px solid var(--verde);
  background:var(--cal-sink);font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--plan,#5A6443);}
#title-block > div{display:flex;gap:18px;padding:7px 0;max-width:var(--wrap);margin:0 auto;
  border-bottom:1px solid rgba(110,122,82,.35);}
#title-block > div:last-child{border-bottom:0;}
#title-block b{font-weight:500;opacity:.6;min-width:52px;}
#title-block .tb-name{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:17px;letter-spacing:.02em;opacity:1;}

@media (max-width:900px){
  .contact__in{grid-template-columns:1fr;}
  .job--lead .job__body{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;}
  .hero__r{min-height:300px;}
  .nav__mid{display:none;}
  .job-pair{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* ============================================================
   Pieces the prototypes did not have: the mobile menu, the contact
   form (including the SMS consent block A2P registration requires),
   and the legal pages.
   ============================================================ */

/* ---------- mobile menu ---------- */
.nav__burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  background:transparent;border:1px solid var(--ink);color:var(--ink);cursor:pointer;}
.menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;z-index:49;
  flex-direction:column;background:var(--cal);border-bottom:1px solid var(--ink);
  padding:10px var(--gutter) 20px;}
.menu a{padding:14px 0;border-bottom:1px solid var(--rule-soft);text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);}
.menu .btn{margin-top:16px;text-align:center;}
/* .menu a sets colour at (0,2,0) and was beating .btn--a at (0,1,0), which
   left the menu CTA as near-black text on its own near-black fill. */
.menu .btn--a{color:var(--cal-hi);}
.menu .btn--a:hover{color:var(--sombra);}

/* ---------- contact form ---------- */
.rule-or{display:flex;align-items:center;gap:16px;margin:34px 0 24px;}
.rule-or::before,.rule-or::after{content:"";flex:1;height:1px;background:rgba(250,247,240,.35);}
.rule-or span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(250,247,240,.7);}
.form{display:grid;gap:12px;}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  width:100%;background:rgba(250,247,240,.1);border:1px solid rgba(250,247,240,.45);
  padding:13px 15px;color:var(--cal-hi);font-family:var(--body);font-size:16px;
  line-height:1.5;outline:none;border-radius:0;
  transition:border-color .15s ease,background .15s ease;}
.form textarea{resize:vertical;min-height:104px;}
.form ::placeholder{color:rgba(250,247,240,.6);}
.form input:focus,.form textarea:focus{border-color:var(--cal-hi);background:rgba(250,247,240,.18);}
/* carrier rules want the consent unticked by default and the terms beside it */
.form__consent{display:flex;gap:11px;align-items:flex-start;
  font-size:13.5px;line-height:1.45;color:rgba(250,247,240,.84);cursor:pointer;}
.form__consent input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--sombra);flex:none;}
.form__consent a{color:var(--cal-hi);}
.form__foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px;}
.form__msg{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(250,247,240,.8);}
.form__msg.is-error{color:var(--cal-hi);border-bottom:1px solid var(--cal-hi);}
.form__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
.form__alt{margin-top:18px;font-size:14.5px;color:rgba(250,247,240,.8);}
.form__alt a{color:var(--cal-hi);}
.success__tick{width:38px;height:38px;margin:0 0 18px;
  border:1px solid rgba(250,247,240,.5);color:var(--cal-hi);
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;}
.success h3{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:clamp(15px,1.77vw,20px);
  text-transform:uppercase;letter-spacing:var(--display-track);margin:0 0 10px;}
.success p{color:rgba(250,247,240,.88);margin:0 0 18px;max-width:40ch;}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,90px) var(--gutter) clamp(60px,9vw,120px);}
.legal__brand{display:inline-block;text-decoration:none;margin-bottom:clamp(34px,5vw,60px);}
.legal__brand .brand__word{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:25px;letter-spacing:.015em;
  text-transform:uppercase;color:var(--ink);}
.legal__kicker{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px;}
.legal h1{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);
  font-size:clamp(20px,2.99vw,35px);line-height:.98;letter-spacing:var(--display-track);
  text-transform:uppercase;margin:0 0 14px;text-wrap:balance;}
.legal__meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 clamp(30px,4vw,50px);}
.legal h2{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:clamp(12px,1.36vw,16px);
  letter-spacing:var(--display-track);text-transform:uppercase;
  margin:clamp(30px,4vw,48px) 0 10px;}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--ink-2);max-width:66ch;}
.legal ul{padding-left:20px;}
.legal li{margin-bottom:7px;}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.legal__callout{border-left:3px solid var(--rosa);background:var(--cal-hi);
  padding:18px 22px;margin:26px 0;}
.legal__callout p{margin:0;}
.legal__foot{margin-top:clamp(44px,6vw,80px);padding-top:20px;border-top:1px solid var(--ink);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);}
.legal__foot a{color:var(--ink-3);}

@media (max-width:860px){
  .nav__burger{display:inline-flex;}
  .form__row{grid-template-columns:1fr;}
}

/* The bar once needed 453px — wordmark, Built/Plan toggle, phone, burger —
   which is wider than any phone in portrait, and the burger fell off the
   right edge. Retiring the toggle gave the width back, so the breakpoint
   that used to move it into the menu is gone with it. */

/* ---------- voice page ----------
   These rules lived in an inline <style> block in the prototype and were
   dropped when the page was migrated onto obra.css, which left every
   section below the hero unstyled. Restored here. */

/* the four moments a call gets missed */
.missed{border-top:1px solid var(--rule);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.missed article{padding:clamp(26px,3.4vw,44px) var(--gutter);
  border-left:1px solid var(--rule);}
.missed article:first-child{border-left:0;}
.missed h3{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--barro);margin:0 0 12px;font-weight:500;}
.missed p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);}

/* does / doesn't */
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);
  max-width:1180px;margin:0 auto;padding:0 var(--gutter) clamp(54px,8vw,100px);}
.two-up h3{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:clamp(14px,1.63vw,20px);
  letter-spacing:var(--display-track);text-transform:uppercase;margin:0 0 18px;}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink);}
.rows li{padding:12px 0;border-bottom:1px solid var(--rule-soft);
  font-size:16px;line-height:1.5;color:var(--ink-2);}
.rows--quiet li{color:var(--ink-3);}

/* setup: a genuine sequence, so it gets real numbers */
.steps{max-width:1180px;margin:0 auto;padding:0 var(--gutter) clamp(54px,8vw,100px);}
.step{display:grid;grid-template-columns:62px 1fr;gap:clamp(16px,3vw,44px);
  padding:24px 0;border-top:1px solid var(--rule);align-items:baseline;}
.step__n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--barro);}
.step h3{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:clamp(13px,1.36vw,17px);
  letter-spacing:var(--display-track);text-transform:uppercase;margin:0 0 8px;}
.step p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:56ch;}

/* price */
.price{background:var(--cal-hi);border-top:1px solid var(--rule);
  padding:clamp(54px,8vw,100px) var(--gutter);}
.price__in{max-width:1180px;margin:0 auto;}
.price__figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(24px,4vw,60px);border-top:1px solid var(--ink);padding-top:28px;margin:26px 0 30px;}
.fig__lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--barro);margin:0 0 12px;}
.fig__amt{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
.fig__from{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);}
.fig__n{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:clamp(27px,3.67vw,44px);
  letter-spacing:-.03em;line-height:1;}
.fig__per{font-family:var(--mono);font-size:11px;color:var(--ink-3);}
.fig p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2);max-width:34ch;}
.price__inc{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 36px;}
.price__inc li{padding:10px 0;border-bottom:1px solid var(--rule-soft);
  font-size:15.5px;color:var(--ink-2);}

@media (max-width:860px){
  .two-up{grid-template-columns:1fr;}
  .missed article{border-left:0;border-top:1px solid var(--rule);}
  .missed article:first-child{border-top:0;}
}

/* ---------- small standalone pages (404, thanks) ----------
   These were styled by the retired styles.css and lost every rule in the
   migration, so both were rendering as unstyled HTML with default blue
   links. Rebuilt in the current language rather than restored: the old
   rules used pill radii, drop shadows and the previous palette. */
.mini{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  max-width:620px;margin:0 auto;padding:clamp(48px,9vw,110px) var(--gutter);}
.mini__brand{display:inline-block;align-self:flex-start;text-decoration:none;
  margin-bottom:clamp(36px,7vw,70px);}
.mini__brand .brand__word{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);font-size:20px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);}
.mini__brand:hover .brand__word{color:var(--barro);}
.mini__kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--barro);margin:0 0 16px;}
.mini h1{font-family:var(--display);font-weight:var(--display-wght);
  font-variation-settings:var(--display-vf);letter-spacing:var(--display-track);
  text-transform:uppercase;font-size:clamp(23px,4.08vw,38px);line-height:1.02;
  margin:0 0 20px;color:var(--ink);}
.mini p{margin:0 0 26px;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:46ch;}
.mini p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--barro);}
.mini p a:hover{color:var(--barro);}
.mini .btn{align-self:flex-start;}
.mini__next{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 30px;
  padding-top:18px;border-top:1px solid var(--rule);}
.mini__next span{font-family:var(--mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);}

/* ---------- the sheet index ----------
   Eight cells, six of them places on this site. The solid beside it shows the
   same eight; hovering a row lights that cell, so the list and the figure are
   visibly one object. The list is the navigation — it is real links and it
   works with the script off. The solid never gates anything. */
.idx{max-width:var(--wrap);margin:0 auto;padding:clamp(26px,4vw,48px) var(--gutter);
  border-bottom:1px solid var(--rule);}
.idx__h{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px;}
.idx ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);}
@media (max-width:860px){ .idx ol{grid-template-columns:repeat(2,1fr);} }
.idx li{background:var(--cal);}
.idx a,.idx li > span:first-child{display:flex;align-items:baseline;gap:10px;
  padding:13px 14px;text-decoration:none;color:var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;}
.idx li:has(.idx__x){display:flex;align-items:baseline;gap:10px;padding:13px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3);}
.idx__n{color:var(--barro);font-size:9.5px;letter-spacing:.14em;}
.idx__x{color:var(--ink-3);}
.idx a:hover{background:var(--cal-sink);}
.idx a[aria-current]{background:var(--ink);color:var(--cal-hi);}
.idx a[aria-current] .idx__n{color:var(--cal-hi);opacity:.7;}

/* The lit cell sits over the dim figure in its own layer so it can carry a
   different colour without redrawing the whole grid twice. */
.solid--lit{color:var(--accent,var(--rosa));z-index:2;}