:root{
  --paper:#E4DCCB;      /* oat — warm natural-dye ground */
  --ink:#2A2620;        /* warm near-black — body */
  --indigo:#2B3B57;     /* indigo vat — deep ground */
  --weld:#B98A2E;       /* weld ochre — fine accent */
  --madder:#A6503C;     /* warm madder — selvedge / links */
  --madder-d:#8A4231;   /* deeper madder — the woven stripe */
  --iron:#6B6152;       /* warm grey — secondary text */
  --ash:#C9BEA8;        /* warm oat — rules, cards */
  --paper-soft:#DDD4C1;
  --sel:clamp(26px,5vw,40px);                      /* selvedge width */
  --gap:calc(var(--sel) + clamp(18px,4vw,40px));   /* content offset that clears it */
  --tab:52px;                                      /* the fixed utility tabs are this wide at
                                                      every viewport — measured, not guessed */
  /* Right margin. It has to clear the tabs, and the old clamp bottomed out at
     44px on phones while the tabs are 52px, so page text ran up to 8px beneath
     them on every page. The floor is now the tab width plus a little air. */
  --dsel:max(calc(var(--tab) + 8px),clamp(44px,5vw,62px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  padding-left:var(--gap);padding-right:var(--dsel);
  overflow-x:clip;
  font-family:"Spectral",Georgia,serif;font-weight:400;
  font-optical-sizing:auto;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:inherit}
img{max-width:100%}

/* ---------- layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
.page{display:block}

@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- full-bleed ------------------------------------------------------
   ONE rule, used by every edge-to-edge section. Do not invent a second one.

   The element's background reaches the true viewport edges and runs UNDER the
   fixed selvedge (left) and utility tabs (right), both z-index 60. Its contents
   are then pushed back inside exactly the gutters the body already uses, so the
   text lands in the same place it did before and nothing can sit beneath either
   fixture. Never use 100vw here: that counts the scrollbar and overflows.

   Add .bleed-flush when the content IS the full-width thing — an edge-to-edge
   photograph — and must not be padded back in.

   Before this was centralised, .bleed cancelled only the LEFT inset and stopped
   at the selvedge, so every blue band and the footer left a bare strip of paper
   down the right-hand side while the W01 band, which cancelled both, did not.  */
.bleed{
  margin-left:calc(-1 * var(--gap));
  margin-right:calc(-1 * var(--dsel));
  padding-left:var(--gap);
  padding-right:var(--dsel);
}
.bleed-flush{padding-left:0;padding-right:0}

/* iOS Safari does not give the page the whole screen: the layout viewport stops
   below the status bar and above the toolbar, so a fixed element at top:0 /
   bottom:0 stops there too and the selvedge appeared to be cut off at both ends.
   Safari paints those two strips with the CANVAS background, so drawing the
   selvedge's own stripe down the left of the canvas makes it read as continuous
   without touching the viewport or the safe areas. Everywhere else the body
   covers this completely, so it is invisible.
   Setting a background here also stops the body's from propagating to the
   canvas, which is why paper is repeated as the second layer. */
html{
  background:
    repeating-linear-gradient(0deg,var(--madder) 0 6px,var(--madder-d) 6px 12px)
      left top / var(--sel) 100% repeat-y,
    var(--paper);
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:40;background:rgba(228,220,203,.9);
  backdrop-filter:blur(6px);
  /* At the top the header belongs to the page and has no lower boundary. The
     hairline and shadow arrive only once it is stuck — see polish.css. */
  border-bottom:1px solid transparent;
  transition:border-color .18s ease, box-shadow .18s ease;
}
header.settled{
  border-bottom-color:var(--ash);
  box-shadow:0 10px 30px -26px rgba(42,38,32,.65);
}
.bar{display:flex;align-items:center;justify-content:space-between;
  gap:22px;padding:14px 20px 14px 2px;max-width:none;margin:0;flex-wrap:nowrap}
.brand{font-weight:500;font-size:1.02rem;letter-spacing:.03em;cursor:pointer;
  background:none;border:0;color:var(--ink);font-family:"Spectral",serif;
  white-space:nowrap;padding:0;text-decoration:none}
.brand .amp{color:var(--madder);font-style:italic;font-weight:400}
nav{display:flex;flex-wrap:nowrap;gap:4px;align-items:center}
.nav-link{font-family:"IBM Plex Mono",monospace;font-size:.665rem;
  letter-spacing:.085em;text-transform:uppercase;color:var(--iron);
  background:none;border:1px solid transparent;cursor:pointer;
  padding:9px 11px;position:relative;transition:.18s;white-space:nowrap;
  text-align:center}
.nav-link:hover{color:var(--ink);border-color:var(--ash);background:var(--paper-soft)}
.nav-link.active{color:var(--ink);border-color:var(--madder)}

/* ---------- nav : a plain dropdown under each parent, no drawn lines ---------- */
.navgroup{position:relative;display:inline-block}
.drop{
  position:absolute;top:100%;left:0;min-width:190px;z-index:56;
  display:none;flex-direction:column;padding:6px 0;
  background:var(--paper);border:1px solid var(--ash);
  box-shadow:0 20px 40px -26px rgba(42,38,32,.45);
}
.navgroup:hover .drop,.navgroup:focus-within .drop{display:flex}
/* Only Windows has a genuine submenu. Mark that group in the HTML and give it
   a quiet desktop-only cue; the touch nav exposes its destinations directly. */
@media (hover:hover) and (min-width:1001px){
  .navgroup.has-submenu>.nav-link::after{
    content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
    border-right:1px solid currentColor;border-bottom:1px solid currentColor;
    opacity:.65;transform:translateY(-2px) rotate(45deg);
  }
}
/* Touch devices have no hover, so the first tap was being spent revealing the
   dropdown and a second was needed to follow a link. There, the menu is driven
   by an explicit .open class set in polish.js instead. */
@media (hover:none), (max-width:1000px){
  /* No hover means no menu: site.js lifts the real child links up into the
     scrolling nav so every destination is a single tap. Hidden here as well so
     nothing flashes before the script runs.
     The width case matters just as much on a desktop with a mouse: below
     1000px the nav becomes a horizontal scroll strip, and a scrolling box
     clips whatever hangs out of it, so the dropdown was cut off at the
     header edge. */
  .drop{display:none}
}
.nav-sub{opacity:.82}
.drop a{
  font-family:"Spectral",serif;font-size:.96rem;color:var(--iron);
  text-decoration:none;padding:8px 18px;white-space:nowrap;transition:.16s;
}
.drop a:hover{color:var(--madder);background:var(--paper-soft)}
.mobonly{display:none}

/* ---------- right edge : help me decide + whatsapp, stacked ---------- */
.floatband{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.floatband .decideband{position:static;transform:none}
/* weld ochre — the one gold in the palette. Paper type on it only reaches
   2.3:1, so the label is --ink; that pairing measures 4.8:1. */
.whatsband{
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:22px 15px;border:1.5px solid var(--weld);border-right:0;
  background:var(--weld);transition:.2s;text-decoration:none;
  box-shadow:-10px 0 32px -16px rgba(42,38,32,.55);
}
.whatsband span{
  writing-mode:vertical-rl;font-family:"IBM Plex Mono",monospace;
  font-size:.86rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
  white-space:nowrap;transition:.2s}
.whatsband:hover{background:var(--madder);border-color:var(--madder);padding-right:19px}
.whatsband:hover span{color:var(--paper)}

.decideband{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  padding:34px 15px;border:1.5px solid var(--indigo);border-right:0;
  background:var(--indigo);transition:.2s;text-decoration:none;
  box-shadow:-10px 0 32px -16px rgba(42,38,32,.55);
}
.decideband span{
  writing-mode:vertical-rl;font-family:"IBM Plex Mono",monospace;
  font-size:.86rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--paper);
  white-space:nowrap;transition:.2s}
.decideband:hover{background:var(--madder);border-color:var(--madder);padding-right:19px}
.decideband.active{background:var(--madder);border-color:var(--madder)}

/* ---------- selvedge : woven madder band, full height, above every page ---------- */
.selvedge{
  position:fixed;left:0;top:0;bottom:0;width:var(--sel);z-index:60;
  background:repeating-linear-gradient(0deg,var(--madder) 0 6px,var(--madder-d) 6px 12px);
  display:flex;align-items:center;justify-content:center;
}
.selvedge::after{ /* frayed, stitched outer edge */
  content:"";position:absolute;right:-4px;top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(158,82,64,.5) 3px 6px);
}
.selvedge span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--paper);white-space:nowrap;opacity:.92;
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-inner{max-width:1080px;margin:0 auto;padding:88px 28px 72px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--iron)}
.hero h1{font-weight:300;font-size:clamp(2.5rem,6vw,4.4rem);line-height:1.04;
  letter-spacing:-.01em;margin:.55em 0 .1em}
.hero h1 .amp{color:var(--madder);font-style:italic}
.lede{font-size:clamp(1.05rem,2vw,1.32rem);font-weight:300;max-width:34ch;
  color:var(--ink);margin:.7em 0 0}
.hero .sub{max-width:52ch;color:var(--iron);font-weight:400;margin:1.1em 0 0;
  font-size:1.02rem}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------- buttons ---------- */
.btn{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;padding:14px 22px;border:1px solid var(--indigo);
  cursor:pointer;transition:.18s;text-decoration:none;display:inline-block}
.btn.primary{background:var(--indigo);color:var(--paper)}
.btn.primary:hover{background:#22304a}
.btn.ghost{background:none;color:var(--indigo)}
.btn.ghost:hover{background:var(--indigo);color:var(--paper)}
.band .btn{border-color:var(--paper)}
.band .btn.primary{background:var(--paper);color:var(--ink)}
.band .btn.primary:hover{background:#F3F2EC}
.band .btn.ghost{color:var(--paper)}
.band .btn.ghost:hover{background:var(--paper);color:var(--ink)}

/* A two-colour keyboard ring stays visible on both the oat page and indigo
   bands. This is site-wide; hover treatments remain intentionally distinct. */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--paper);outline-offset:2px;
  box-shadow:0 0 0 4px var(--madder);
}

/* ---------- sections ---------- */
.section{padding:60px 0;border-top:1px solid var(--ash)}
.section:first-of-type{border-top:0}
.klabel{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--madder);margin:0 0 18px}
h2{font-weight:400;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;
  letter-spacing:-.01em;margin:0 0 .4em}
h3{font-weight:500;font-size:1.12rem;margin:0 0 .3em}
h1,h2,h3{text-wrap:balance}
p{max-width:64ch;text-wrap:pretty}
.dim{color:var(--iron)}

/* ---------- make grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--ash);border:1px solid var(--ash);margin-top:8px}
.cell{background:var(--paper);padding:26px 24px;cursor:pointer;transition:.18s;
  min-height:150px;display:flex;flex-direction:column;justify-content:space-between}
.cell:hover{background:var(--paper-soft)}
.cell h3{margin:0}
.cell .num{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--weld);
  letter-spacing:.14em}
.cell .desc{color:var(--iron);font-size:.95rem;margin:14px 0 0;max-width:none}
.cell .go{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--madder);margin-top:16px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px;margin-top:10px}
.step .n{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--madder);
  letter-spacing:.14em;border-bottom:1px solid var(--ash);padding-bottom:10px;margin-bottom:14px}
.step p{color:var(--iron);font-size:.98rem}

/* ---------- feature band ---------- */
.band{background:var(--indigo);color:var(--paper)}
.band .wrap{padding:66px 28px}
.band h2{color:var(--paper)}
.band p{color:rgba(238,237,230,.82);max-width:56ch}
.band .klabel{color:var(--weld)}
.band .dim{color:rgba(238,237,230,.7)}

/* ---------- spec lists ---------- */
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;border-top:1px solid var(--ash);margin-top:26px}
.spec{padding:22px 0;border-bottom:1px solid var(--ash)}
.spec .t{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--iron);margin-bottom:8px}
.spec p{font-size:.98rem;max-width:38ch}

.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pad-top{margin-top:40px}

/* ---------- contact ---------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.card{border:1px solid var(--ash);padding:30px 28px;background:var(--paper)}
.card h3{font-weight:400;font-size:1.35rem}
.field{display:block;margin-top:16px}
.field label{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--iron);display:block;margin-bottom:6px}
.field input,.field textarea{width:100%;font-family:"Spectral",serif;font-size:1rem;
  color:var(--ink);background:var(--paper-soft);border:1px solid var(--ash);
  padding:11px 12px;border-radius:0}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--madder);outline-offset:1px}
.detail-list{list-style:none;padding:0;margin:26px 0 0;font-family:"IBM Plex Mono",monospace;
  font-size:.82rem;color:var(--iron);line-height:2}
.detail-list a{color:var(--madder);text-decoration:none}
.detail-list a:hover{text-decoration:underline}

/* ---------- image slots + composition rows ---------- */
.slot{position:relative;display:flex;align-items:flex-end;
  aspect-ratio:3/2;padding:16px;background:var(--paper-soft);
  border:1px solid var(--ash);margin-top:26px}
.slot--wide{aspect-ratio:16/9}
.slot--tall{aspect-ratio:4/5}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot .brief{font-family:"IBM Plex Mono",monospace;font-size:.68rem;line-height:1.6;
  color:var(--iron);max-width:60ch}
.slot .brief b{display:block;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--madder);margin-bottom:6px;font-size:.64rem}
.band .slot{background:rgba(238,237,230,.07);border-color:rgba(238,237,230,.3)}
.band .slot .brief{color:rgba(238,237,230,.72)}
.band .slot .brief b{color:var(--weld)}

.comp{display:grid;grid-template-columns:1fr;gap:20px;
  padding:34px 0;border-top:1px solid var(--ash)}
.comp:last-of-type{border-bottom:1px solid var(--ash)}
.comp .slot{margin-top:0}
.comp .n{font-size:.68rem;letter-spacing:.16em;color:var(--weld);margin-bottom:8px}
.comp h3{font-weight:500;font-size:1.12rem;margin:0 0 .4em}
.comp p{color:var(--iron);font-size:.98rem;max-width:44ch}
@media(min-width:760px){
  .comp{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
}

/* fixed-setup note — the shooting constraint that holds across a set */
.setup{border-left:2px solid var(--weld);padding:2px 0 2px 16px;margin:26px 0 0;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;line-height:1.68;
  color:var(--iron);max-width:66ch}
.setup b{display:block;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--madder);margin-bottom:6px;font-size:.64rem}
.band .setup{border-left-color:var(--weld);color:rgba(238,237,230,.72)}
.band .setup b{color:var(--weld)}

/* ---------- windows : the two doorways ---------- */
#windows{
  --wi-edge-gap:clamp(20px,4.6vw,68px);
  --wi-center-shift:clamp(9px,2vw,20px);
  --wi-normal-width:min(1024px,calc(100vw - var(--gap) - var(--dsel) - 56px));
  --wi-hero-width:min(1480px,max(var(--wi-normal-width),
    calc(100vw - var(--sel) - var(--dsel) - var(--wi-edge-gap) - var(--wi-edge-gap))));
}
#windows .big{font-family:"Spectral",serif;font-weight:400;
  font-size:clamp(1.12rem,1.9vw,1.34rem);line-height:1.62;max-width:60ch}
#windows .windows-hero-frame{
  width:var(--wi-hero-width);max-width:none;
  margin-left:50%;transform:translateX(calc(-50% - var(--wi-center-shift)));
  padding:0;border-style:solid;border-color:transparent;border-width:2px 2px 26px;
  border-image-source:url("a/hem-frame-indigo.62200af8.svg");
  border-image-slice:3 3 34 3;border-image-width:2px 2px 26px 2px;
  border-image-repeat:round;
}
#windows .routes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
#windows .route{position:relative;display:block;overflow:hidden;border:0;border-radius:16px;
  aspect-ratio:4/3;background:var(--paper-soft);cursor:pointer;text-align:left;padding:0;
  font-family:inherit;color:var(--paper);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(228,220,203,.42)}
#windows .route:hover{box-shadow:inset 0 0 0 1.5px rgba(228,220,203,.75)}
#windows .route .slot{position:absolute;inset:0;width:100%;height:100%;margin:0;
  border:0;background:var(--paper);aspect-ratio:auto}
#windows .route .body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;
  display:block;background:linear-gradient(180deg,rgba(43,59,87,0) 0%,rgba(43,59,87,.78) 100%)}
#windows .route .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper-soft);opacity:.85;margin-bottom:4px}
#windows .route h3.t{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:1.15rem;letter-spacing:0;color:var(--paper);margin:0}
#windows .overlap{margin-top:22px;color:var(--iron);font-size:.92rem}
@media(max-width:720px){#windows .routes{grid-template-columns:1fr}}

/* ---------- blinds : the type list ---------- */
#blinds .blist{border-top:1px solid var(--ash);margin-top:26px}
/* ---------- blinds : the hero ----------
   Same device as the windows hero — the indigo hem frame, thin on three sides
   with the weighted hem along the bottom — and the same breakout, so the page
   opens wider than its own text column the way every other page hero does.
   Not the curtains treatment: that jali band is curtains' own artwork. */
#blinds{
  --bl-edge-gap:clamp(20px,4.6vw,68px);
  --bl-center-shift:clamp(9px,2vw,20px);
  --bl-normal-width:min(1024px,calc(100vw - var(--gap) - var(--dsel) - 56px));
  --bl-hero-width:min(1480px,max(var(--bl-normal-width),
    calc(100vw - var(--sel) - var(--dsel) - var(--bl-edge-gap) - var(--bl-edge-gap))));
}
#blinds .blinds-hero-frame{
  width:var(--bl-hero-width);max-width:none;
  margin-left:50%;transform:translateX(calc(-50% - var(--bl-center-shift)));
  padding:0;border-style:solid;border-color:transparent;border-width:2px 2px 26px;
  border-image-source:url("a/hem-frame-indigo.62200af8.svg");
  border-image-slice:3 3 34 3;border-image-width:2px 2px 26px 2px;
  border-image-repeat:round;
}

#blinds .btype{padding:28px 0;border-bottom:1px solid var(--ash);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,275px);
  gap:30px;align-items:start}
#blinds .btype .slot{margin-top:0;aspect-ratio:1/1;padding:12px}
#blinds .btype h3{margin:0 0 4px}
#blinds .btype .mech{font-style:italic;color:var(--iron);font-size:1rem;margin-bottom:9px}
#blinds .btype p{margin:0;max-width:60ch}
#blinds .btype .opt{margin-top:9px;color:var(--iron);font-size:.96rem}
@media(max-width:760px){#blinds .btype{grid-template-columns:1fr;gap:18px}}

/* ---------- upholstery : the sets ---------- */
#upholstery .g8{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
#upholstery .g8 .slot{margin-top:0;aspect-ratio:4/3;padding:12px}
#upholstery .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
#upholstery .g3 .slot{margin-top:0;aspect-ratio:4/5;padding:12px}
#upholstery .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:26px}
#upholstery .g5 .slot{margin-top:0;aspect-ratio:3/4;padding:12px}
#upholstery .g4{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
#upholstery .g4 .slot{margin-top:0;aspect-ratio:3/2}
#upholstery .rel{display:flex;flex-direction:column}
#upholstery .relcap{font-family:"IBM Plex Mono",monospace;font-size:.7rem;
  letter-spacing:.1em;color:var(--iron);margin-top:10px}
@media(max-width:900px){
  #upholstery .g8{grid-template-columns:repeat(2,1fr)}
  #upholstery .g5{grid-template-columns:repeat(2,1fr)}
  #upholstery .g4{grid-template-columns:1fr}
}
@media(max-width:560px){#upholstery .g3{grid-template-columns:1fr}}

/* ---------- rugs : the sets ---------- */
#rugs .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
#rugs .g2 .slot{margin-top:0;aspect-ratio:3/2}
#rugs .g4{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
#rugs .g4 .slot{margin-top:0;aspect-ratio:3/2}
#rugs .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
#rugs .g3 .slot{margin-top:0;aspect-ratio:3/2;padding:12px}
#rugs .cap{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.1em;
  color:var(--iron);margin-top:10px}
#rugs .rel{display:flex;flex-direction:column}
@media(max-width:820px){
  #rugs .g2,#rugs .g4,#rugs .g3{grid-template-columns:1fr}
}

/* ---------- footer ---------- */
footer{background:var(--indigo);color:var(--paper);margin-top:0}
.foot{max-width:1080px;margin:0 auto;padding:54px 28px 40px;
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.foot .mark{font-family:"Spectral",serif;font-weight:500;font-size:1.5rem;
  color:#F3F2EC;letter-spacing:.03em}
.foot .mark .amp{color:var(--weld);font-style:italic}
.foot-links{display:flex;flex-wrap:wrap;gap:16px}
.foot-links a{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;background:none;border:0;color:rgba(238,237,230,.8);cursor:pointer}
.foot-links a:hover{color:var(--paper)}
.foot small{display:block;color:rgba(238,237,230,.55);font-family:"IBM Plex Mono",monospace;
  font-size:.68rem;letter-spacing:.08em;margin-top:22px}
.foot .col p{color:rgba(238,237,230,.72);font-size:.9rem;max-width:30ch;margin:.4em 0 0}

@media(max-width:1000px){
  .panel{display:none !important}
  .mobonly{display:inline-block}
  .navtree{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:0;margin-bottom:0}
  .navtree .navitem{margin:0}
  .nav-link{font-size:.7rem;padding:8px 11px;letter-spacing:.1em}
  nav{gap:6px}
  .bar{gap:18px;flex-wrap:wrap}
  .decideband span{letter-spacing:.16em;font-size:.72rem}
  .decideband{padding:24px 11px}
}
@media(max-width:720px){
  .two,.cards{grid-template-columns:1fr}
  .hero-inner{padding:64px 24px 56px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}

/* ---------- curtains : jali hero, the four-room grid, the making pair ---------- */
#curtains{
  --cu-edge-gap:clamp(20px,4.6vw,68px);
  --cu-center-shift:clamp(9px,2vw,20px);
  --cu-normal-width:min(1024px,calc(100vw - var(--gap) - var(--dsel) - 56px));
  --cu-hero-width:min(1480px,max(var(--cu-normal-width),
    calc(100vw - var(--sel) - var(--dsel) - var(--cu-edge-gap) - var(--cu-edge-gap))));
  /* halfway between the hero and the text column */
  --cu-look-width:calc(var(--cu-hero-width) / 2 + var(--cu-normal-width) / 2);
}

/* ── hero: jali-head window, video sitting in the open lower light ───────── */
#curtains .cu-hero{
  position:relative;
  width:var(--cu-hero-width);max-width:none;
  margin-left:50%;transform:translateX(calc(-50% - var(--cu-center-shift)));
  aspect-ratio:1480/804;
  margin-top:clamp(26px,3.4vw,42px);
}
#curtains .cu-hero video{
  position:absolute;
  left:0.8695%;top:18.2400%;width:98.2611%;height:79.3600%;
  object-fit:cover;display:block;background:var(--ash);
}
#curtains .cu-hero .cu-jali{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  /* the poster stands in; nothing moves */
  #curtains .cu-hero video{animation:none}
}

/* ── the look is yours ────────────────────────────────────────────────────
   Four rooms at full strength; the words sit on a solid paper plate laid
   over the centre, so each quadrant keeps its outer half. Nothing is faded
   and nothing is read through anything. ------------------------------------ */
#curtains .look{
  position:relative;isolation:isolate;overflow:hidden;
  width:var(--cu-look-width);max-width:none;
  margin:8px 0 0 50%;
  transform:translateX(calc(-50% - var(--cu-center-shift)));
  border-radius:18px;aspect-ratio:3/2;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,56px);
}
#curtains .look-grid{
  position:absolute;inset:0;z-index:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0;
}
#curtains .look-grid img{width:100%;height:100%;object-fit:cover;display:block}

#curtains .look-card{
  position:relative;z-index:3;
  width:min(46%,46ch);
  /* --ash: the palette's card ground. Clearly deeper than the page, and
     still 8.2:1 against --ink. Body copy in here must stay --ink, not --iron. */
  background:var(--ash);
  padding:clamp(22px,2.4vw,34px) clamp(22px,2.4vw,34px) clamp(24px,2.6vw,36px);
  border-radius:10px;
  box-shadow:0 2px 26px rgba(42,38,32,.18), inset 0 0 0 1px rgba(43,59,87,.22);
}
#curtains .look-card h2{margin-top:.12em}
#curtains .look-card p{color:var(--ink)}
#curtains .look-frame{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  border:2px solid var(--indigo);border-radius:18px;
}
/* which quadrant is which — a swatch tag, legible on pale cloth or dark */
#curtains .look-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
#curtains .look-tags span{
  position:absolute;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--indigo);
  background:rgba(228,220,203,.93);padding:4px 8px;border-radius:3px;
}
#curtains .look-tags span:nth-child(1){top:14px;left:16px}
#curtains .look-tags span:nth-child(2){top:14px;right:16px}
#curtains .look-tags span:nth-child(3){bottom:14px;left:16px}
#curtains .look-tags span:nth-child(4){bottom:14px;right:16px}
@media(max-width:720px){
  #curtains .look{aspect-ratio:auto;padding:18px}
  #curtains .look-card{width:100%}
  #curtains .look-tags{display:none}
}

/* ── what's possible: selvedge frame, standard column width ──────────────── */
#curtains .wp-frame{
  padding:0;border:14px solid transparent;
  border-image-source:url("a/selvedge-frame.d79da8b3.svg");
  border-image-slice:32;border-image-width:14px;border-image-repeat:round;
}

/* ── on making ────────────────────────────────────────────────────────────
   Copy top-left, one study bottom-right of it, the second below-left, the
   two frames touching at a single corner. Gaps are zero at the meeting
   point; the air comes from padding on the copy instead. ------------------- */
#curtains .making{
  --mk:clamp(185px,25.3vw,315px);
  display:grid;grid-template-columns:1fr var(--mk);gap:0;
  margin-top:4px;
}
#curtains .making-copy{
  grid-column:1;grid-row:1;align-self:start;
  padding-right:clamp(20px,4vw,58px);padding-bottom:clamp(26px,3.4vw,46px);
}
#curtains .making-copy .klabel{margin-top:0}
#curtains .making figure{margin:0}
#curtains .making-a{grid-column:2;grid-row:1;align-self:end;width:var(--mk)}
/* fills the text column, so its left edge is the paragraph's left edge and
   its top-right corner lands on the study above */
#curtains .making-b{grid-column:1;grid-row:2;align-self:start;width:100%}
#curtains .making .frame{
  display:block;padding:0;border:11px solid transparent;
  border-image-source:url("a/tenter-frame-madder.766d9f60.svg");
  border-image-slice:24;border-image-width:11px;border-image-repeat:round;
}
#curtains .making img{display:block;width:100%;height:auto;object-fit:cover}
#curtains .making-a img{aspect-ratio:4/5}
#curtains .making-b img{aspect-ratio:1500/1076}
#curtains .making figcaption{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;line-height:1.6;
  letter-spacing:.04em;color:rgba(238,237,230,.7);
}
#curtains .making-a figcaption{margin-bottom:9px}   /* above, so the corner meets */
#curtains .making-b figcaption{margin-top:9px}
@media(max-width:700px){
  #curtains .making{grid-template-columns:1fr;--mk:min(286px,68vw)}
  #curtains .making-copy{grid-column:1;grid-row:1;padding:0 0 22px}
  #curtains .making-a{grid-column:1;grid-row:2;justify-self:start;margin-bottom:22px}
  #curtains .making-b{grid-column:1;grid-row:3}
}


/* ═══ added by build-site.py — real pages, real images ═══ */
.slot.filled{background:none;border:0;padding:0}
.slot.filled img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot.filled video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot.native{aspect-ratio:auto;display:block}
.slot.native img,.slot.native video{position:static;width:100%;height:auto}

figure.shot{margin:26px 0 0}
figure.shot .frame{display:block;border:1px solid var(--ash)}
figure.shot img{display:block;width:100%;height:auto}
figure.shot figcaption{font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.1em;color:var(--iron);margin-top:9px}
.band figure.shot .frame{border-color:rgba(238,237,230,.3)}
.band figure.shot figcaption{color:rgba(238,237,230,.72)}
.g2x{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.g2x figure.shot{margin-top:26px}
@media(max-width:720px){.g2x{grid-template-columns:1fr}}

/* One visual object made from the owner's own texture photographs. */
figure.material-study{margin:30px 0 0}
.material-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.material-scroll::-webkit-scrollbar{display:none}
.material-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  min-width:760px;background:var(--ash);border:1px solid var(--ash)}
.material-strip img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.material-study figcaption{font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.1em;color:var(--iron);margin-top:9px}

/* The recorded cushions setting uses two upright cloth studies as one unit. */
.cushion-range-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cushion-range-pair img{display:block;width:100%;height:auto}

/* nav as real links */
nav a.nav-link{text-decoration:none}
@media(max-width:1000px){
  .bar{flex-direction:column;align-items:stretch;gap:5px}
  nav{width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  .navgroup,nav>.nav-link{flex:0 0 auto}
}
#windows a.route{text-decoration:none;color:inherit;display:block}
#windows a.route .slot{display:block;position:absolute}
.drop a{text-decoration:none}
.foot-links a{display:block;background:none;border:0;padding:0;text-align:left;
  color:rgba(238,237,230,.72);font:inherit;font-size:.9rem;cursor:pointer;
  text-decoration:none;margin:.35em 0}
.foot-links a:hover{color:#EEEDE6}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--paper);
  padding:10px 14px;border:1px solid var(--madder)}

/* ═══ W01 window band — six-facade strip in a full-bleed colour frame ═══
   An end-to-end colour field that runs UNDER the fixed selvedge (left) and the
   decide bar (right): it's static content, so z-index 60 on those keeps them on
   top. The strip sits inside with an equal band of colour above and below it —
   that symmetric margin is the frame. --w01frame sets that distance. */
.w01band{
  --w01frame:clamp(14px,2.2vw,26px);        /* equal colour above & below the strip */
  background:var(--madder-d);                /* fresh accent; not the indigo used elsewhere */
  margin-top:clamp(10px,2vw,22px);           /* breakout comes from .bleed .bleed-flush */
  margin-bottom:clamp(10px,2vw,22px);
  padding:var(--w01frame) 0;
}
.w01band .w01{width:100%;max-width:none;height:clamp(190px,18vw,250px);margin:0 auto}
.w01{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.w01::-webkit-scrollbar{display:none}
.w01 img{display:block;width:860px;max-width:none;height:100%;object-fit:cover;object-position:center 48%}
@media(min-width:900px){
  .w01{overflow:hidden}
  .w01 img{width:100%}
}

/* ═══ home — grid hero ═══
   A wall of real swatch photos, mostly quiet neutrals with a soft trace of
   colour running through it. Rebuilt with a fresh random arrangement on every
   load (see the inline script on the home page) so it never repeats and never
   needs regenerating by hand when the photo folder changes.
   Full-bleed like the W01 band above: margins cancel the body's own left/right
   inset so the grid reaches the true viewport edge and runs UNDER the fixed
   selvedge and decide tab (both z-index:60; this sits below that, unset). */
#home .gridhero{position:relative;overflow:hidden;background:var(--paper);
  margin-top:clamp(10px,2vw,22px)}      /* breakout comes from .bleed .bleed-flush */
#home .gridhero-grid{display:grid;gap:2px;padding:2px;background:var(--paper);
  filter:saturate(.62) brightness(.96)}
@media(min-width:700px){#home .gridhero-grid{gap:3px;padding:3px}}
#home .gridhero-cell{position:relative;aspect-ratio:1/1;background:var(--paper-soft);overflow:hidden}
#home .gridhero-cell img{width:100%;height:100%;object-fit:cover;display:block}
#home .gridhero-cell.frame svg{width:60%;height:60%;position:absolute;top:20%;left:20%}
#home .gridhero-scrim{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
/* The grid hero is full-bleed, so its overlaid text sits under the fixed
   selvedge (--sel) and the utility tabs (--dsel) unless it is padded away from
   both. --dsel is the wider of the two, so using it on both sides clears each
   fixture and keeps the block optically centred. */
#home .gridhero-text{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:flex-end;
  justify-content:center;padding:0 max(20px,var(--dsel)) 26px;text-align:center}
#home .gridhero-text .inner{max-width:640px}
#home .gridhero-text .eyebrow{color:var(--paper-soft);opacity:.85;margin-bottom:12px;
  text-transform:none}
#home .gridhero-text h1{font-weight:400;font-size:clamp(28px,4.4vw,46px);
  margin:0 0 14px;color:var(--paper);line-height:1.05}
#home .gridhero-text .sub{max-width:52ch;margin:0 auto;color:var(--paper-soft);
  font-size:clamp(14px,1.3vw,17px);line-height:1.6}
#home .gridhero-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  padding:28px 20px 8px}

/* ═══ home — bento routes ═══
   Windows keeps the tall box on purpose: a curtain or blind needs its vertical
   drop to read, and a square crop would cut the thing that matters. The other
   three sit in the remaining space at whatever shape suits a room photo.
   Rounded corners, and the frame is a translucent ring sitting just inside the
   edge rather than an opaque border, so it reads as glass over the photo. */
#home .bento{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;margin-top:14px}
#home .bento a{position:relative;display:block;overflow:hidden;text-decoration:none;
  background:var(--paper-soft);border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(228,220,203,.4)}
#home .bento a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#home .bento a:hover{box-shadow:inset 0 0 0 1.5px rgba(228,220,203,.75)}
#home .bento .b-windows{grid-column:1/2;grid-row:1/3;aspect-ratio:3/4}
#home .bento .b-furniture{grid-column:2/4;grid-row:1/2;aspect-ratio:16/9}
#home .bento .b-floors{grid-column:2/3;grid-row:2/3;aspect-ratio:1/1}
#home .bento .b-finish{grid-column:3/4;grid-row:2/3;aspect-ratio:1/1}
#home .bento .label{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(180deg,rgba(43,59,87,0) 0%,rgba(43,59,87,.78) 100%)}
#home .bento .k{display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper-soft);opacity:.85;margin-bottom:4px}
#home .bento .t{display:block;font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:1.15rem;color:var(--paper)}
@media(max-width:900px){#home .bento{grid-template-columns:1fr 1fr}
  #home .bento .b-windows{grid-column:1/3;grid-row:1/2;aspect-ratio:3/4;max-height:64vh}
  #home .bento .b-furniture{grid-column:1/3;grid-row:2/3;aspect-ratio:16/9}
  #home .bento .b-floors{grid-column:1/2;grid-row:3/4}
  #home .bento .b-finish{grid-column:2/3;grid-row:3/4}}

/* ═══ blinds — a hairline on each type photo ═══
   These were carrying the full woven-tick selvedge at 14px, which is a lot of
   frame around a 275px picture and left the photograph looking inset. The
   photographs are the point here, so the edge is now a single indigo rule and
   the picture is bigger. */
#blinds .btype .slot.filled{
  padding:0;border:1px solid var(--indigo);border-image:none;
}

/* ═══ cushions — three frames for three kinds of image ═══
   Hero: the same madder Hem band as upholstery's hero, in madder deep.
   "Where the cloth comes from": madder deep selvedge, closed rectangle.
   The five compositions: indigo tenter — a hairline with pin marks and
   open corners, lighter than the other two since there are five of them
   sitting together. */
#cushions{
  --cu-edge-gap:clamp(20px,4.6vw,68px);
  --cu-center-shift:clamp(9px,2vw,20px);
  --cu-normal-width:min(1024px,calc(100vw - var(--gap) - var(--dsel) - 56px));
  --cu-hero-width:min(1480px,max(var(--cu-normal-width),
    calc(100vw - var(--sel) - var(--dsel) - var(--cu-edge-gap) - var(--cu-edge-gap))));
}
#cushions .slot--wide.filled:not(.native){
  width:var(--cu-hero-width);max-width:none;
  margin:0 0 0 50%;
  transform:translateX(calc(-50% - var(--cu-center-shift)));
  padding:0;border-style:solid;border-color:transparent;
  border-width:2px 2px 26px;
  border-image-source:url("a/hem-frame.0ebc2d86.svg");
  border-image-slice:3 3 34 3;
  border-image-width:2px 2px 26px 2px;
  border-image-repeat:round;
}
#cushions .cushion-ranges{
  padding:0;border:14px solid transparent;
  border-image-source:url("a/selvedge-frame-madder.535fbb17.svg");
  border-image-slice:32;
  border-image-width:14px;
  border-image-repeat:round;
}
#cushions .comp .slot.filled{
  padding:0;border:11px solid transparent;
  border-image-source:url("a/tenter-frame-indigo.8b50236d.svg");
  border-image-slice:24;
  border-image-width:11px;
  border-image-repeat:round;
}

/* ═══ upholstery — framed image compositions ═══ */
#upholstery{
  --up-edge-gap:clamp(20px,4.6vw,68px);
  --up-center-shift:clamp(9px,2vw,20px);
  --up-normal-width:min(1024px,calc(100vw - var(--gap) - var(--dsel) - 56px));
  --up-hero-width:min(1480px,max(var(--up-normal-width),
    calc(100vw - var(--sel) - var(--dsel) - var(--up-edge-gap) - var(--up-edge-gap))));
  --up-window-width:calc(var(--up-hero-width) / 2 + var(--up-normal-width) / 2);
}

#upholstery .upholstery-hero-frame{
  width:var(--up-hero-width);max-width:none;
  margin:0 0 0 50%;
  transform:translateX(calc(-50% - var(--up-center-shift)));
  border-style:solid;border-color:transparent;
  border-width:2px 2px 26px;
  border-image-source:url("a/hem-frame.0ebc2d86.svg");
  border-image-slice:3 3 34 3;
  border-image-repeat:round;
  border-image-width:2px 2px 26px 2px;
}
#upholstery .upholstery-intro-copy{margin:0 0 clamp(38px,5vw,64px)}
#upholstery .upholstery-intro-copy h1{
  max-width:19ch;font-weight:300;font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.06;margin:.35em 0 .3em;
}
#upholstery .upholstery-intro-copy .lede{max-width:56ch;margin:18px 0 0}

#upholstery .upholstery-cloth-window{
  position:relative;
  width:var(--up-window-width);max-width:none;
  margin:0 0 0 50%;
  transform:translateX(calc(-50% - var(--up-center-shift)));
  padding:clamp(8px,1vw,13px) clamp(8px,1vw,13px) clamp(18px,1.7vw,25px);
  background:var(--indigo);
  box-shadow:inset 1px 1px 0 rgba(228,220,203,.28),
    inset -2px -2px 0 rgba(20,29,45,.38);
}
#upholstery .upholstery-cloth-window::after{
  content:"";position:absolute;left:clamp(8px,1vw,13px);right:clamp(8px,1vw,13px);
  bottom:clamp(6px,.55vw,8px);height:3px;opacity:.62;
  background:repeating-linear-gradient(90deg,var(--paper) 0 2px,transparent 2px 10px);
}
#upholstery .upholstery-cloth-window__copy{
  display:grid;grid-template-columns:minmax(0,1.18fr) minmax(240px,.82fr);
  column-gap:clamp(28px,5vw,68px);align-items:end;
  min-height:clamp(190px,19vw,275px);
  padding:clamp(26px,4.2vw,58px);
  background:var(--paper);
  border-bottom:clamp(10px,1.15vw,16px) solid var(--indigo);
}
#upholstery .upholstery-cloth-window__copy .klabel{grid-column:1/-1;align-self:start}
#upholstery .upholstery-cloth-window__copy h2{margin-bottom:0;max-width:18ch}
#upholstery .upholstery-cloth-window__copy p{
  align-self:start;margin:0;max-width:42ch;padding-top:.2em;
}
#upholstery .g8.upholstery-cloth-window__panes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(5px,.65vw,9px);margin:0;background:var(--indigo);
}
#upholstery .g8.upholstery-cloth-window__panes .slot{
  margin:0;padding:0;aspect-ratio:4/3;border:0;
}

#upholstery .g5{grid-template-columns:1fr;width:min(380px,100%)}
#upholstery .g5 .upholstery-recovery-frame{
  padding:0;border:14px solid transparent;
  border-image-source:url("a/selvedge-frame.d79da8b3.svg");
  border-image-slice:32;
  border-image-width:14px;
  border-image-repeat:round;
}

@media(max-width:720px){
  #upholstery .upholstery-cloth-window__copy{grid-template-columns:1fr;min-height:0}
  #upholstery .upholstery-cloth-window__copy .klabel{grid-column:auto}
  #upholstery .upholstery-cloth-window__copy h2{margin-bottom:.4em}
}
@media(max-width:560px){
  #upholstery .g8.upholstery-cloth-window__panes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── enquiry form ─────────────────────────────────────────────────────────
   Built to FORM-SPEC.md. Chips are real radios and checkboxes with the input
   visually hidden, so keyboard and screen-reader behaviour is the browser's
   rather than ours. */
/* .field sets display:block, which outranks the browser's own [hidden] rule.
   Without this, hiding a field does nothing at all. */
.enq [hidden], .enq-done[hidden]{display:none !important}
.enq{max-width:680px;margin-top:8px}
.enq .step{border:0;padding:0;margin:0 0 38px}
.enq fieldset.step{min-width:0}
.enq .q{font-family:"IBM Plex Mono",monospace;font-size:.78rem;letter-spacing:.1em;
        text-transform:uppercase;color:var(--ink);margin:0 0 12px;padding:0;
        display:flex;gap:12px;align-items:baseline;line-height:1.5}
.enq .q-n{color:var(--madder);font-size:.7rem}
.enq .sub-q{text-transform:none;letter-spacing:.02em;font-family:"Spectral",serif;
            font-size:1.02rem;color:var(--iron)}
.enq .q-note{font-size:.92rem;color:var(--iron);margin:-4px 0 14px;max-width:56ch}
.enq .q-note.q-note-after{margin-top:18px}
.enq .step.sub{margin-top:-10px;padding:24px 26px 26px;border-left:2px solid var(--madder);
                background:var(--paper-soft)}
.enq .step.sub .sub-q{margin-bottom:18px;color:var(--ink)}
.enq .prompt{margin-top:20px}
.enq .prompt label{display:block;font-family:"Spectral",serif;font-size:1.03rem;
                   letter-spacing:0;text-transform:none;color:var(--ink);
                   font-style:italic;margin:0 0 2px;opacity:.85}
.enq .prompt input{background:transparent;border:0;border-bottom:1px solid var(--ash);
                   padding:6px 0;font-size:1.05rem}
.enq .prompt input:focus{outline:none;border-bottom-color:var(--madder);
                         box-shadow:0 1px 0 0 var(--madder)}
.enq .aside{font-size:.88rem;color:var(--iron);margin-top:14px}
.enq .aside a{color:var(--madder)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:9px 15px;border:1px solid var(--ash);
           background:var(--paper);font-size:.95rem;line-height:1.3;
           transition:background .12s,border-color .12s,color .12s}
.chip input:checked+span{background:var(--indigo);border-color:var(--indigo);color:var(--paper)}
.chip input:focus-visible+span{outline:2px solid var(--madder);outline-offset:2px}
@media (hover:hover){.chip input:not(:checked):hover+span{border-color:var(--iron)}}

.enq .field label{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.enq .hint{font-family:"Spectral",serif;font-size:.82rem;letter-spacing:0;
           text-transform:none;color:var(--iron);font-weight:400}
.enq .err{display:block;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
          letter-spacing:.06em;color:var(--madder-d);margin-top:8px}
.enq .form-err{margin-top:14px}
.enq .field.bad input,.enq .field.bad textarea{border-color:var(--madder-d)}
.enq .step.bad .chip span{border-color:var(--madder-d)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.enq-foot{border-top:1px solid var(--ash);padding-top:24px;margin-top:8px}
.enq .fineprint{font-size:.86rem;color:var(--iron);max-width:60ch;margin:0 0 20px}
.enq .fineprint a{color:var(--madder)}

.enq-done{max-width:640px}
.enq-done h2{margin-top:0}
.enq-done p{margin:0 0 .9em}
.enq-done .next{font-size:1.05rem}
.enq-done .quiet{font-size:.94rem;color:var(--iron)}
.enq-done a{color:var(--madder)}
.enq-done:focus{outline:none}

@media (max-width:560px){
  .enq .step{margin-bottom:32px}
  .chip span{padding:11px 14px}
  .enq .step.sub{padding-left:12px}
}

/* ── stages ───────────────────────────────────────────────────────────────
   Three named parts instead of nine numbers. The whole form is in the HTML;
   the script collapses it, so without JavaScript this is one long page that
   still works. */
.stages{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;
        margin:0 0 40px;font-family:"IBM Plex Mono",monospace;font-size:.72rem;
        letter-spacing:.1em;text-transform:uppercase}
.stages[hidden]{display:none}
.stage-tab{display:flex;align-items:baseline;gap:9px;padding:10px 18px;
           color:var(--iron);border-radius:2px;
           /* a progress read-out: not selectable text, so no I-beam on hover */
           cursor:default;-webkit-user-select:none;user-select:none}
.stage-tab .stage-n{color:var(--madder)}
.stage-tab.current{background:var(--paper-soft);color:var(--ink)}
.stage-tab.done{color:var(--ink)}
.stage-tab.done .stage-n::after{content:" ·"}

.stage{border:0;padding:0;margin:0}
.stage-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.mins{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.12em;
      text-transform:uppercase;color:var(--iron);margin-left:auto}

/* ── stacked choices with an explanation each ─────────────────────────── */
.opts{display:block;border-top:1px solid var(--ash)}
.opt{position:relative;display:flex;gap:14px;align-items:flex-start;
     padding:16px 4px;border-bottom:1px solid var(--ash);cursor:pointer}
.opt input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.opt-mark{flex:0 0 auto;width:15px;height:15px;margin-top:5px;border-radius:50%;
          border:1px solid var(--ash);background:var(--paper);transition:border-color .12s}
.opt input:checked ~ .opt-mark{border:5px solid var(--indigo);background:var(--paper)}
.opt input:focus-visible ~ .opt-mark{outline:2px solid var(--madder);outline-offset:2px}
.opt-body{display:block}
.opt-title{display:block;font-size:1.05rem;line-height:1.35}
.opt-desc{display:block;font-size:.92rem;color:var(--iron);margin-top:3px}
@media (hover:hover){.opt:hover .opt-mark{border-color:var(--iron)}}

/* ── the contact page: a way in, not a wall of questions ───────────────── */
.begin{display:grid;grid-template-columns:1fr minmax(260px,340px);gap:48px;align-items:start}
.begin-card{background:var(--indigo);color:var(--paper);padding:30px 30px 34px}
.begin-card .klabel{color:var(--paper);opacity:.72;margin-bottom:22px}
.begin-card dl{margin:0}
.begin-card dt{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.14em;
               text-transform:uppercase;opacity:.66;margin-top:18px}
.begin-card dd{margin:4px 0 0;padding-bottom:14px;border-bottom:1px solid rgba(228,220,203,.22);
               font-size:1.02rem;overflow-wrap:anywhere}
.begin-card dd a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(228,220,203,.4)}
.begin-card dd a:hover{border-bottom-color:var(--paper)}
.begin-card p{font-size:.9rem;opacity:.75;margin:22px 0 0;max-width:30ch}

.begin-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
            border-top:1px solid var(--ash)}
.way{display:block;padding:30px 26px 34px;border-right:1px solid var(--ash);
     text-decoration:none;color:inherit;transition:background .14s}
.way:last-child{border-right:0}
.way:hover{background:var(--paper-soft)}
.way-n{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;color:var(--madder)}
.way h3{margin:.5em 0 .35em;font-weight:400;font-size:1.4rem}
.way p{font-size:.95rem;color:var(--iron);margin:0}

@media (max-width:820px){
  .begin{grid-template-columns:1fr;gap:32px}
  .begin-ways{grid-template-columns:1fr}
  .way{border-right:0;border-bottom:1px solid var(--ash);padding:24px 0 26px}
  .way:last-child{border-bottom:0}
}
@media (max-width:560px){
  .stages{font-size:.66rem;gap:4px}
  .stage-tab{padding:8px 12px}
  .mins{margin-left:0;width:100%}
}

/* ── lines: three weights, not one ────────────────────────────────────────
   Every rule on the site used to be 1px of --ash, which is 1.35:1 against the
   paper. A page division and a row separator inside a list were drawn
   identically, so the lines carried no meaning, and the ones that stopped at
   the text column read as failing to reach rather than as a decision.

   Three tiers now, and the difference is legible:

     --rule  page divisions. Full width, and deliberately fading out to the
             right, so a line that does not reach the edge is doing it on
             purpose. Echoes the selvedge, which is where the eye starts.
     --ash   content rules inside a section. The quietest — unchanged.
     --edge  controls. Inputs, chips, the radio marks. Not decoration: this
             border is the only thing saying "you can type here", so it clears
             3:1 while the decorative rules stay soft. */
:root{
  --rule:#B3A88E;   /* 1.73:1 — a division you notice without reading it */
  --edge:#8A7E66;   /* 2.93:1 — an affordance you must be able to see */
}

.section{
  border-top:0;
  background-image:linear-gradient(90deg,var(--rule) 0%,var(--rule) 54%,rgba(179,168,142,0) 100%);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 0;
}
.section:first-of-type{background-image:none}
.band .section, .section.band{background-image:none}

/* controls carry the weight; decoration does not */
.field input,.field textarea{border-color:var(--edge)}
.chip span{border-color:var(--edge)}
.opt-mark{border-color:var(--edge)}
.enq .prompt input{border-bottom-color:var(--edge)}
.card{border-color:var(--rule)}

/* a focused or chosen control should read louder than an idle one */
.chip input:not(:checked):hover+span{border-color:var(--ink)}

/* ── corners ──────────────────────────────────────────────────────────────
   4px on the boxes you touch or read from: controls, cards, the contact
   panel. Not on the structural frame — image frames, bands, the selvedge and
   the section rules stay hard, so the softened things read as objects sitting
   on a straight ground rather than the whole page going soft.

   The larger radii already in the stylesheet (10, 16, 18px on route cards and
   framed figures) are deliberate and left alone. */
:root{ --r:4px }

.btn{border-radius:var(--r)}
.card{border-radius:var(--r)}
.chip span{border-radius:var(--r)}
.field input,.field textarea{border-radius:var(--r)}
.begin-card{border-radius:var(--r)}
.stage-tab{border-radius:var(--r)}
.enq .prompt input{border-radius:0}   /* a ruled line, not a box */