/* Build My Dental Office — public site visual system.
   Tokens and composition follow the design system (bone / deep ink blue / sand, with moss as the
   single green accent) and docs/design/VISUAL-DIRECTION.md. */

:root{
  --canvas:#f6f3ee;
  --paper:#faf8f5;
  --ink:#16202b;
  --muted:#5c6672;
  --action:#1f3348;
  --action-ink:#faf8f5;
  --line:#dcd6cc;
  --sand:#b08258;
  --sand-ink:#8a6135;
  --moss:#6f8f6a;
  --moss-ink:#4a6b4d;
  --face-lift:rgba(250,248,245,.22);
  --face-shade:rgba(22,32,43,.18);
  --face-shade-deep:rgba(22,32,43,.34);
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 var(--sans)}
img{max-width:100%}
a{color:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;background:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--action);outline-offset:3px}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media (max-width:760px){.wrap{padding:0 16px}}

/* header · the monogram is the mark: a serif "b." behind a hairline */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:13px;line-height:1.35;letter-spacing:.01em}
.brand .monogram{font:400 30px/1 var(--serif);color:var(--ink);border-right:1px solid var(--line);padding-right:12px}
.brand:hover .monogram{color:var(--action)}
.site-header nav{display:flex;gap:28px;align-items:center;font-size:13px}
.site-header nav a{text-decoration:none}
.site-header nav a:hover{color:var(--action)}
.back{font:12px var(--mono);color:var(--action);text-decoration:none;display:inline-block;margin-bottom:20px}

/* buttons */
.button{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;background:var(--action);border:1px solid var(--action);color:var(--action-ink);font:500 13px var(--sans);text-decoration:none;line-height:1;min-height:20px}
.button:hover{filter:brightness(1.12)}
.button.quiet{background:transparent;color:var(--action)}

/* typography */
.eyebrow{font:11px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:0 0 10px}
.eyebrow-rule{width:36px;height:2px;background:var(--moss);margin:0 0 18px}
h1{font:clamp(34px,4.4vw,58px)/1.06 var(--serif);letter-spacing:-.02em;margin-bottom:18px;text-wrap:balance}
h1 em{font-style:normal;color:var(--action)}
h2{font:clamp(24px,2.6vw,32px)/1.2 var(--serif);letter-spacing:-.015em}
h3{font:20px/1.3 var(--serif);margin-bottom:8px}
p.lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:46ch}
.small{font-size:13px;line-height:1.7;color:var(--muted)}
.caption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:11px var(--mono);color:var(--muted);padding-top:10px}

/* homepage hero · two plates, the front one overlapping and breaking its column */
.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center;padding:56px 0 48px}
.hero figure{margin:0;position:relative}
.hero-plate{position:absolute;top:-32px;right:-24px;width:47%;height:152px;background:var(--action);z-index:0}
.hero-image{display:block;width:100%;height:440px;object-fit:cover;background:var(--paper);border:1px solid var(--line);position:relative;z-index:1}
.hero figcaption{position:relative;z-index:1}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:32px;padding-top:32px}
  .hero-image{height:auto;aspect-ratio:4/3}
  .hero-plate{display:none}
}

/* process row · the plan → wireframe → model pipeline */
.process{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:32px 0;margin:8px 0 0}
.pipeline{display:block;width:100%;height:auto;max-width:720px;margin:0 auto 4px}
.pipeline .m-action{fill:var(--action)}
.pipeline .m-sand{fill:var(--sand)}
.pipeline .m-moss{fill:var(--moss)}
.pipeline .w-lift{fill:var(--face-lift)}
.pipeline .w-shade{fill:var(--face-shade)}
.pipeline .w-shade2{fill:var(--face-shade-deep)}
.pipeline .plan,.pipeline .wire{fill:none;stroke:var(--action);stroke-width:1}
.pipeline .plan-inner{fill:none;stroke:var(--line);stroke-width:1}
.pipeline .link{stroke:var(--sand);stroke-width:1;fill:none}
.pipeline .stage{font:10px var(--mono);letter-spacing:.12em;fill:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:0;margin:0}
.steps li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:14px}
.steps .num{font:12px var(--mono);color:var(--sand-ink)}
.steps h3{font-size:19px;margin-bottom:6px}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:20px}.pipeline{margin-bottom:24px}}

/* case-study feature */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding:56px 0;align-items:center}
.feature img{width:100%;display:block;aspect-ratio:1.6;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
.feature .body p{font-size:15px;line-height:1.8;color:var(--muted);margin:14px 0 20px}
@media (max-width:900px){.feature{grid-template-columns:1fr;gap:28px;padding:40px 0}}

/* service / inquiry */
.service-note{padding:32px 0 56px;display:flex;justify-content:space-between;gap:40px;border-top:1px solid var(--line)}
.service-note h2{max-width:460px}
.service-note .body{max-width:420px}
.service-note .body p{font-size:14px;line-height:1.8;color:var(--muted);margin:14px 0 0}
@media (max-width:760px){.service-note{flex-direction:column;gap:24px}}

footer{padding:22px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:11px var(--mono);color:var(--muted)}

/* project cards grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{display:block;background:var(--paper);border:1px solid var(--line);color:inherit;text-decoration:none;padding:0}
.card:hover{border-color:var(--action)}
.card img{width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;display:block;border-bottom:1px solid var(--line)}
.card .body{padding:16px 18px}
.card h3{font-size:17px;margin-bottom:4px}
.card p{margin:0;font:12px var(--mono);color:var(--muted);line-height:1.6}
.card .cta{display:inline-block;margin-top:12px;font:500 13px var(--sans);color:var(--action)}

/* project detail: study viewer */
.project-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.project-header .sub{font:13px var(--mono);color:var(--muted);margin-top:4px}
.badge{display:inline-block;padding:7px 11px;border:1px solid var(--line);color:var(--action);font:11px var(--mono)}

.study{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;padding:0 0 48px}
.study figure{margin:0}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.segmented{display:flex;border:1px solid var(--line)}
.segmented button{background:transparent;color:var(--muted);border:0;padding:11px 15px;font-size:12px;min-height:40px}
.segmented button.on{background:var(--action);color:var(--action-ink)}
.view-controls{display:flex;gap:8px}
.view-controls button{width:40px;min-height:40px;background:transparent;border:1px solid var(--line);color:var(--muted);font:11px var(--mono)}
.view-controls button.on{border-color:var(--action);color:var(--action-ink);background:var(--action)}
.study-image{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
.study aside section{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.study aside h2{font-size:18px;margin-bottom:14px}
.study aside p{font-size:13px;line-height:1.75;color:var(--muted)}
.fact{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:1.8;margin-top:10px}
.fact span:first-child{color:var(--muted)}
.fact span:last-child{text-align:right}
.legend{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;font-size:12.5px}
.legend i{width:13px;height:13px;border:1px solid rgba(0,0,0,.2);display:inline-block;margin-top:3px}
.legend b{font:11px var(--mono);font-weight:400}
.legend span{color:var(--muted)}
@media (max-width:900px){.study{grid-template-columns:1fr}}

.empty-state{padding:48px 24px;background:var(--paper);border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.8;text-align:center}

/* ==================================================================
   Marketing pages (2026-09-19)
   Shared navigation and footer for every public page, plus the
   editorial components used by /how-it-works/, /services/, /pricing/,
   /for-architects/, /work/ and /contact/. Same tokens, same rules:
   hairlines, square corners, one action colour, no shadows.
   ================================================================== */

/* skip link · visually hidden until it receives keyboard focus */
.skip{position:absolute;left:-9999px;top:16px;z-index:10;padding:10px 14px;background:var(--action);color:var(--action-ink);font:500 13px var(--sans);text-decoration:none}
.skip:focus{left:16px}

/* primary navigation · a row on desktop, a <details> disclosure on small screens.
   The <details> holds only the summary; the nav and sign-in link are its siblings
   and are shown by the [open] state, so nothing is duplicated in the DOM. */
.site-nav a{padding:4px 0;border-bottom:1px solid transparent}
.site-nav a[aria-current="page"]{color:var(--action);border-bottom-color:var(--action)}
.signin{font:12px var(--mono);color:var(--action);text-decoration:none;white-space:nowrap;padding:9px 12px;border:1px solid var(--line)}
.signin:hover{border-color:var(--action)}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:40px;padding:10px 12px;border:1px solid var(--line);color:var(--ink);font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary:focus-visible{outline:3px solid var(--action);outline-offset:3px}
.menu[open] summary{background:var(--action);border-color:var(--action);color:var(--action-ink)}
@media (max-width:960px){.site-header .site-nav{gap:18px}}
@media (max-width:760px){
  .site-header{flex-wrap:wrap;gap:16px;padding:20px 0}
  .menu{display:block;margin-left:auto}
  .site-header .site-nav,.site-header .signin{display:none}
  .site-header .menu[open] ~ .site-nav{display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;gap:0;border-top:1px solid var(--line)}
  .site-header .site-nav a{padding:13px 0;border-bottom:1px solid var(--line)}
  .site-header .site-nav a[aria-current="page"]{font-weight:500}
  .site-header .menu[open] ~ .signin{display:block;flex-basis:100%;padding:13px 0;border:0;border-bottom:1px solid var(--line)}
}

/* footer · identity on the left, links on the right, disclaimer below */
.site-footer{display:block;margin-top:8px;padding:24px 0 36px;border-top:1px solid var(--line);font:11px var(--mono);color:var(--muted)}
.site-footer .row{display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;line-height:1.8}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap}
.site-footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.site-footer a:hover{color:var(--action)}
.site-footer .note{margin-top:14px;max-width:80ch;line-height:1.7}

/* page hero · title block at the top of every inner page */
.page-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px 64px;align-items:end;padding:56px 0 44px;border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(32px,4vw,52px)}
.page-hero .lede{max-width:52ch}
.page-hero figure{margin:0}
.page-hero figure img{display:block;width:100%;height:auto;aspect-ratio:1344/752;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
@media (max-width:900px){.page-hero{grid-template-columns:1fr;gap:28px;padding:36px 0 32px}}

/* section rhythm */
.section{padding:56px 0;border-bottom:1px solid var(--line)}
main > .section:last-child{border-bottom:0}
.section + .service-note{border-top:0}
.section-head{max-width:640px;margin-bottom:36px}
.section-head h2{text-wrap:balance}
.section-head p{font-size:15px;line-height:1.8;color:var(--muted);margin-top:14px}
.section-head a{color:var(--action)}
.section > .note{margin-top:32px}
.prose{max-width:64ch;font-size:15px;line-height:1.8;color:var(--muted)}
.prose p + p{margin-top:14px}
.prose strong{color:var(--ink);font-weight:500}
/* Not a .button. This rule is more specific than `.button` and comes after it, so it repainted a
   button's label in the button's own background colour — dark on dark, a filled rectangle with no
   text, live on /work/. Excluding buttons here fixes every future one too, rather than the one
   that happened to be noticed. */
.prose a:not(.button){color:var(--action)}
.prose .button{margin-top:8px}
.service-note .actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:760px){.section{padding:40px 0}}

/* aside note · a hairline in sand marks a short qualification */
.note{max-width:60ch;padding:4px 0 4px 20px;border-left:2px solid var(--sand);font-size:14px;line-height:1.8;color:var(--muted)}
.note strong{color:var(--ink);font-weight:500}
.note a{color:var(--action)}

/* numbered sequence · the editorial step list on How it works and For architects */
.sequence{list-style:none;margin:0;padding:0}
.sequence li{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1.2fr);gap:16px 40px;padding:32px 0;border-top:1px solid var(--line)}
.sequence .num{font:400 40px/1 var(--serif);letter-spacing:-.02em;color:var(--sand-ink)}
.sequence h3{font-size:24px;margin-bottom:8px;text-wrap:balance}
.sequence .who{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sequence .body p{font-size:15px;line-height:1.8;color:var(--muted)}
.sequence .body p + p{margin-top:12px}
.sequence .body a{color:var(--action)}
@media (max-width:900px){
  .sequence li{grid-template-columns:56px minmax(0,1fr);gap:12px 20px;padding:24px 0}
  .sequence .num{font-size:30px}
  .sequence .body{grid-column:2}
}

/* two-column comparison · "a client sees / an architect sees" */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 48px}
.compare > div{padding-top:16px;border-top:2px solid var(--ink)}
.compare h3{font-size:20px}
.compare ul{list-style:none;margin:12px 0 0;padding:0}
.compare li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.65}
.compare li span{display:block;font-size:13px;color:var(--muted)}
@media (max-width:760px){.compare{grid-template-columns:1fr}}

/* definition rows · term on the left, plain explanation on the right */
.dl{display:grid;grid-template-columns:220px minmax(0,1fr);gap:0 32px;margin:0}
.dl dt{padding:16px 0;border-top:1px solid var(--line);font:500 15px/1.6 var(--sans)}
.dl dd{margin:0;padding:16px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.75;color:var(--muted)}
.dl dd a{color:var(--action)}
/* The 220px term column can't hold at phone widths — stack, and let the term keep the rule. */
@media (max-width:700px){
  .dl{grid-template-columns:minmax(0,1fr);gap:0}
  .dl dt{padding:14px 0 0}
  .dl dd{padding:4px 0 14px;border-top:0}
}
@media (max-width:640px){
  .dl{grid-template-columns:1fr}
  .dl dt{padding-bottom:4px}
  .dl dd{border-top:0;padding-top:0}
}

/* plain lists · hairline-separated statements, no bullets */
.plain{list-style:none;margin:0;padding:0;max-width:64ch}
.plain li{padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.7}
.plain li strong{font-weight:500}
.plain li span{display:block;font-size:14px;color:var(--muted)}

/* service packages · one editorial row per package */
.packages{border-bottom:1px solid var(--line)}
.package{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 56px;padding:40px 0;border-top:1px solid var(--line)}
.package h3{font-size:26px}
.package .price{font:12px var(--mono);color:var(--sand-ink);margin-top:6px}
.package .summary{max-width:40ch;margin-top:14px;font-size:15px;line-height:1.8;color:var(--muted)}
.package .lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.package h4{margin:0 0 8px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.package ul{list-style:none;margin:0;padding:0}
.package li{padding:8px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
@media (max-width:900px){.package{grid-template-columns:1fr;gap:20px;padding:32px 0}}
@media (max-width:560px){.package .lists{grid-template-columns:1fr}}

/* subscription tiers · three columns divided by hairlines, not boxed cards */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.tier{display:flex;flex-direction:column;padding:28px 28px 32px 0;border-right:1px solid var(--line)}
.tier + .tier{padding-left:28px}
.tier:last-child{padding-right:0;border-right:0}
.tier h3{font-size:24px}
.tier .lead{font-size:14px;line-height:1.7;color:var(--muted);margin-top:6px}
.tier .amount{margin:20px 0 4px;font:400 44px/1 var(--serif);letter-spacing:-.02em}
.tier .amount small{margin-left:6px;font:12px var(--mono);letter-spacing:0;color:var(--muted)}
.tier .alt{font:12px var(--mono);color:var(--muted);margin-bottom:20px}
.tier ul{flex:1;list-style:none;margin:0 0 24px;padding:0}
.tier li{padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.tier .button{align-self:flex-start}
@media (max-width:900px){
  .tiers{grid-template-columns:1fr}
  .tier,.tier + .tier{padding:28px 0;border-right:0;border-bottom:1px solid var(--line)}
  .tier:last-child{border-bottom:0}
}

/* production rate rows */
.rates{border-top:2px solid var(--ink)}
.rate{display:grid;grid-template-columns:minmax(0,.7fr) 150px minmax(0,1.3fr);gap:10px 32px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.rate h3{font-size:20px;margin:0}
.rate .from{font:400 22px/1.2 var(--serif)}
.rate .from small{display:block;margin-bottom:4px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rate p{font-size:14px;line-height:1.7;color:var(--muted)}
.footnotes{list-style:none;margin:24px 0 0;padding:0;max-width:72ch;font-size:13px;line-height:1.7;color:var(--muted)}
.footnotes li{padding:6px 0}
@media (max-width:760px){.rate{grid-template-columns:minmax(0,1fr) auto}.rate p{grid-column:1/-1}}

/* FAQ · two columns of question and answer */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.faq > div{padding:22px 0;border-top:1px solid var(--line)}
.faq h3{font-size:18px;margin-bottom:6px}
.faq p{font-size:14px;line-height:1.75;color:var(--muted)}
@media (max-width:760px){.faq{grid-template-columns:1fr}}

/* portfolio entry */
.work-entry{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px 48px;align-items:start;padding:48px 0;border-top:1px solid var(--line)}
.work-entry figure{margin:0}
.work-entry .lead-image{display:block;width:100%;height:auto;aspect-ratio:1344/752;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
.work-entry .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.work-entry .strip img{display:block;width:100%;height:auto;aspect-ratio:1344/752;object-fit:cover;background:var(--paper);border:1px solid var(--line)}
.work-entry .meta{margin:10px 0 16px;font:12px var(--mono);line-height:1.8;color:var(--muted)}
.work-entry .body p{font-size:15px;line-height:1.8;color:var(--muted)}
.work-entry .body p + p{margin-top:12px}
.work-entry .body .button{margin-top:22px}
@media (max-width:900px){.work-entry{grid-template-columns:1fr;gap:24px;padding:36px 0}}

/* contact form · hairline fields, square corners, visible focus */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px 64px;padding:48px 0}
.form{display:grid;gap:20px}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:grid;gap:6px;min-width:0}
.field label{font:500 13px var(--sans)}
.field .hint{font:11px var(--mono);color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:46px;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);font:15px var(--sans);-webkit-appearance:none;appearance:none}
.field select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6672' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field textarea{min-height:170px;line-height:1.6;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--action);outline-offset:2px;border-color:var(--action)}
.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.form-status{padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.7}
.form-status textarea{width:100%;min-height:200px;margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:0;background:var(--paper);color:var(--ink);font:13px/1.6 var(--mono)}
.contact-aside h2{font-size:22px;margin-bottom:12px}
.contact-aside p{font-size:14px;line-height:1.8;color:var(--muted)}
.contact-aside p + p{margin-top:12px}
.contact-aside a{color:var(--action)}
.contact-aside .direct{font:16px var(--mono);overflow-wrap:anywhere}
@media (max-width:900px){.contact{grid-template-columns:1fr;gap:36px}}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}

/* project page · breadcrumb back to the portfolio */
main > .back{margin:28px 0 20px}

/* not-found page */
.notfound{max-width:44ch;margin:0 auto;padding:96px 0;text-align:center}
.notfound h1{font-size:clamp(30px,4vw,44px)}
.notfound p{margin:10px 0 24px}

/* ==================================================================
   Policy pages (2026-09-19)
   /terms/, /privacy/ and /security/. A draft banner that cannot be
   missed, a numbered table of contents, numbered clauses with anchor
   ids, bracketed placeholders set apart in mono, drafting notes, a
   hairline table for the retention proposal and status-marked control
   lists. Same rules: hairlines, square corners, one action colour,
   no fills beyond paper.
   ================================================================== */

/* draft banner · sits between the header and the page hero */
.draft-banner{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:baseline;margin:20px 0 0;padding:14px 18px;border:1px solid var(--sand);border-left-width:4px;background:var(--paper);font-size:14px;line-height:1.7;color:var(--ink)}
.draft-banner .tag{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-ink);white-space:nowrap}
.draft-banner p{margin:0;flex:1 1 32ch}
.draft-banner .version{font:12px var(--mono);color:var(--muted)}

/* document meta · version and related-document links under a title */
.doc-meta{margin-top:12px;font:12px var(--mono);line-height:1.9;color:var(--muted)}
.doc-meta a{color:var(--action)}

/* table of contents · numbered hairline rows in two columns */
.toc{list-style:none;margin:0;padding:0;counter-reset:toc;columns:2;column-gap:48px;max-width:76ch}
.toc li{counter-increment:toc;break-inside:avoid;padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.6}
.toc li::before{content:counter(toc,decimal-leading-zero);display:inline-block;width:32px;font:11px var(--mono);color:var(--sand-ink)}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--action);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.toc{columns:1}}

/* clauses · a serif number in the margin, a heading, then prose */
.clause{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px 40px;padding:36px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.clause:first-of-type{border-top:0;padding-top:0}
.clause .num{font:400 32px/1 var(--serif);letter-spacing:-.02em;color:var(--sand-ink)}
.clause h2{font-size:24px;margin-bottom:12px;text-wrap:balance}
.clause .body{max-width:64ch;font-size:15px;line-height:1.8;color:var(--muted)}
.clause .body > * + *{margin-top:14px}
.clause .body strong{color:var(--ink);font-weight:500}
.clause .body a{color:var(--action)}
.clause .body ul{padding-left:20px}
.clause .body li + li{margin-top:6px}
@media (max-width:760px){.clause{grid-template-columns:1fr;gap:6px;padding:28px 0}.clause .num{font-size:24px}}

/* drafting note · an unresolved point for the owner or counsel, dashed so it reads as provisional */
.drafting{padding:10px 14px;border:1px dashed var(--line);font-size:13px;line-height:1.7;color:var(--muted)}
.drafting b{display:block;margin-bottom:2px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-ink);font-weight:400}

/* placeholders · unresolved [bracketed] values, set in mono on a dashed sand hairline */
.ph{font:13px var(--mono);color:var(--sand-ink);border-bottom:1px dashed var(--sand);white-space:normal;overflow-wrap:anywhere}
/* Phone: the fixed 96px number column and the 64ch measure both exceed the viewport, so the
   numbered layouts stack and placeholders are allowed to break rather than push the page wide. */
@media (max-width:700px){
  .clause,.sequence li{grid-template-columns:minmax(0,1fr);gap:10px}
  .clause .num,.sequence .num{font-size:24px}
  .clause .body,.sequence .body{max-width:none}
  .ph{white-space:normal;overflow-wrap:anywhere}
}

/* hairline table · the retention proposal */
.table{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-size:14px;line-height:1.65}
.table caption{caption-side:top;text-align:left;padding:0 0 12px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.table th,.table td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{font:500 14px/1.5 var(--sans);color:var(--ink)}
.table td{color:var(--muted)}
.table td:first-child{color:var(--ink)}
@media (max-width:560px){.table th,.table td{padding-right:10px}}

/* control lists · the security page's grouped "in place" and "not yet" statements */
.control-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 48px}
.control-groups h3{font-size:18px;margin:24px 0 4px}
.control-groups .plain{max-width:none}
@media (max-width:760px){.control-groups{grid-template-columns:1fr}}
.status{display:inline-block;margin-right:10px;font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--moss-ink)}
.status.pending{color:var(--sand-ink)}

/* ==================================================================
   Help page (2026-09-19)
   /help/ reuses .page-hero, .draft-banner, .toc, .dl, .sequence and
   .note. It adds two small things: an exact quotation of wording the
   workspace shows a guest, set in mono behind an action hairline so a
   reader can tell our prose from a screen string, and inline mono for
   a literal like a file extension. Both wrap rather than push the page
   wide at phone widths.
   ================================================================== */
.ui-quote{max-width:60ch;margin:0 0 32px;padding:16px 20px;border:1px solid var(--line);border-left:3px solid var(--action);background:var(--paper);overflow-wrap:anywhere}
.ui-quote p{font:15px/1.7 var(--mono);color:var(--ink)}
.ui-quote cite{display:block;margin-top:10px;font:13px/1.6 var(--sans);font-style:normal;color:var(--muted)}
code{font:.92em var(--mono);color:var(--ink);overflow-wrap:anywhere}

/* Phone fix for .sequence, which /help/ leans on twice. The 900px rule pins
   .sequence .body to grid-column 2; the 700px rule then collapses the list item
   to a single explicit column but never releases that pin, so the body was
   placed in an implicit second column and the heading column was squeezed to
   nothing. Put the body back in column 1 once the item has stacked. This also
   corrects /how-it-works/ and /for-architects/, which stack the same way. */
@media (max-width:700px){
  .sequence .body{grid-column:1}
}

/* The honeypot: present for a bot, absent for a person and for a screen reader. Not display:none —
   some bots skip those; off-screen with no tab stop is the form that catches more of them. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status.ok{border-left:3px solid var(--moss,#5b6b4f);padding-left:12px}
.form-status.warn{border-left:3px solid var(--sand-ink,#8a6b3f);padding-left:12px}

/* hero actions + demo teaser (D1) */
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.hero .support{margin-top:12px}
.teaser{padding:48px 0 40px;border-top:1px solid var(--line)}
.teaser-head{max-width:64ch;margin-bottom:28px}
.teaser-head h2{font-size:clamp(24px,3vw,34px);margin:6px 0 10px}
.teaser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.teaser-card{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);background:var(--paper)}
.teaser-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper);border-bottom:1px solid var(--line)}
.teaser-card .body{display:block;padding:14px 16px 16px}
.teaser-card b{display:block;font:400 18px/1.25 var(--serif);margin-bottom:6px}
.teaser-card .body span{display:block;font-size:13px;line-height:1.6;color:var(--muted)}
.teaser-card:hover{border-color:var(--action)}
.teaser-card:hover b{color:var(--action)}
.teaser .note{margin-top:16px;color:var(--muted)}
@media (max-width:960px){.teaser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.teaser-grid{grid-template-columns:1fr}}

/* product showcase (Sept 24): real workspace screens instead of prose */
.showcase{padding:56px 0 24px;border-top:1px solid var(--line)}
.showcase-head{max-width:62ch;margin-bottom:36px}
.showcase-head h2{font-size:clamp(26px,3.2vw,38px);margin:6px 0 12px}
.showcase-head p{color:var(--muted)}
.show-row{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:center;padding:28px 0 44px}
.show-row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.show-row.flip .screen{order:2}
.screen{margin:0;border:1px solid var(--line);background:var(--paper);box-shadow:0 18px 40px -24px rgba(22,32,43,.35)}
.screen::before{content:"";display:block;height:22px;border-bottom:1px solid var(--line);background:
  radial-gradient(circle at 12px 11px,#d9cfc2 3.5px,transparent 4px),
  radial-gradient(circle at 26px 11px,#d9cfc2 3.5px,transparent 4px),
  radial-gradient(circle at 40px 11px,#d9cfc2 3.5px,transparent 4px)}
.screen img{display:block;width:100%;height:auto}
.show-copy .step{font:11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-ink)}
.show-copy h3{font:clamp(22px,2.4vw,28px)/1.2 var(--serif);margin:8px 0 14px}
.show-copy ul{list-style:none;margin:0 0 18px;padding:0}
.show-copy li{position:relative;padding:8px 0 8px 26px;border-top:1px solid var(--line);font-size:15px}
.show-copy li::before{content:"";position:absolute;left:2px;top:16px;width:10px;height:6px;border-left:2px solid var(--moss-ink);border-bottom:2px solid var(--moss-ink);transform:rotate(-45deg)}
.show-copy .who{font-size:13px;color:var(--muted);margin:0 0 16px}
.show-copy a.more{font:500 13px var(--sans);color:var(--action)}
.showcase .note{font-size:12px;color:var(--muted);margin-top:4px}
@media (max-width:900px){
  .show-row,.show-row.flip{grid-template-columns:1fr;gap:22px;padding:18px 0 36px}
  .show-row.flip .screen{order:0}
}

/* price strip: the four numbers a buyer looks for, at a glance */
.price-strip{padding:40px 0 48px;border-top:1px solid var(--line)}
.price-strip .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);margin:18px 0 22px}
.price-strip .cell{padding:18px 18px 18px 0;border-right:1px solid var(--line)}
.price-strip .cell + .cell{padding-left:18px}
.price-strip .cell:last-child{border-right:0}
.price-strip .cell b{display:block;font:400 17px/1.3 var(--serif)}
.price-strip .cell .amt{display:block;font:400 30px/1.2 var(--serif);margin:6px 0 4px}
.price-strip .cell .amt small{font:12px var(--mono);color:var(--muted);letter-spacing:.04em}
.price-strip .cell span{font-size:13px;color:var(--muted)}
.price-strip .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:900px){
  .price-strip .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-strip .cell:nth-child(2){border-right:0}
  .price-strip .cell:nth-child(3){padding-left:0}
  .price-strip .cell:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:420px){
  .price-strip .grid4{grid-template-columns:1fr}
  .price-strip .cell,.price-strip .cell + .cell{border-right:0;padding-left:0}
  .price-strip .cell + .cell{border-top:1px solid var(--line)}
}

/* Service discovery: the three offers stay visible before package detail. */
.service-overview{padding:40px 0 44px;border-top:1px solid var(--line)}
.page-hero + .service-overview{border-top:0}
.service-overview-head{max-width:740px;margin-bottom:24px}
.service-overview-head h2{margin-bottom:12px}
.service-overview-head>p:last-child{color:var(--muted)}
.service-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.service-preview{display:flex;flex-direction:column;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:6px;background:var(--paper);overflow:hidden}
.service-preview:hover{border-color:var(--action)}
.service-preview:focus-visible{outline-offset:4px}
.service-preview-media{position:relative;aspect-ratio:4/3;background:var(--paper);overflow:hidden}
.service-preview-media>img{display:block;width:100%;height:100%;object-fit:cover}
.service-preview-copy{display:flex;flex-direction:column;flex:1;padding:20px}
.service-preview-copy .eyebrow{font:500 12px var(--sans);letter-spacing:.03em;text-transform:none}
.service-preview-copy h3{font:500 21px/1.25 var(--sans);letter-spacing:-.02em}
.service-preview-copy p{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.service-preview-link{display:flex;justify-content:space-between;gap:12px;font-size:14px;font-weight:500;color:var(--action);margin-top:auto;min-height:24px}
.service-print-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.service-print-pair>div{position:relative;background-size:300% auto;background-position:center;background-repeat:no-repeat;background-color:#efe5d8}
.service-print-exterior{background-image:url('pricing/roof-on-print-finishes.webp')}
.service-print-interior{background-image:url('pricing/roof-off-print-finishes-v2.webp')}
.service-print-pair span,.service-preview-label{position:absolute;bottom:12px;left:12px;padding:4px 8px;background:var(--paper);color:var(--ink);border-radius:3px;font-size:11px}
.service-overview-note{font-size:12px;line-height:1.6;color:var(--muted);margin-top:16px;max-width:100ch}
@media(max-width:760px){
  .service-overview-grid{grid-template-columns:1fr;gap:20px}
  .service-overview{padding:32px 0}
  .service-preview-media{aspect-ratio:3/2}
}
/* Optional inquiry details remain one ordinary, labelled disclosure. */
.inquiry-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}
.inquiry-details summary{min-height:44px;padding:12px 0;cursor:pointer;font-weight:500}
.inquiry-details summary span{font-weight:400;color:var(--muted);font-size:13px}
.inquiry-details[open]{display:grid;gap:20px;padding-bottom:20px}

/* Sign-in is a small layer over the public site, not a second marketing landing page. */
.signin-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:80px 24px auto auto;padding:30px;border:1px solid var(--line);border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 24px 80px #16202b33;font-family:var(--sans)}
.signin-dialog::backdrop{background:rgb(22 32 43 / .28);backdrop-filter:blur(3px)}
.signin-dialog h2{font:600 28px/1.2 var(--sans);letter-spacing:-.025em;margin:16px 0 12px}
.signin-dialog p{font-size:15px;line-height:1.55;margin:0 0 18px}
.signin-dialog .eyebrow{font-size:11px;padding-right:30px;color:var(--muted)}
.signin-dialog .signin-close{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);font:28px var(--sans);cursor:pointer}
.signin-dialog .signin-close:hover{background:var(--canvas)}
.signin-dialog .signin-continue{display:flex;justify-content:space-between;width:100%;box-sizing:border-box;border-radius:8px;min-height:48px}
.signin-providers{display:grid;gap:10px}
.signin-provider{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;box-sizing:border-box;border-radius:8px;font:500 15px var(--sans);text-decoration:none}
.signin-provider svg{flex:none}
.signin-google{background:#fff;color:#1f1f1f;border:1px solid #747775}
.signin-google:hover{background:#f2f2f2}
.signin-apple{background:#000;color:#fff;border:1px solid #000}
.signin-apple:hover{background:#262626}
.signin-provider:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.signin-dialog .signin-or{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12px;color:var(--muted)}
.signin-or::before,.signin-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.signin-email{display:grid;gap:12px}
.signin-email p{margin:0}
.signin-email .signin-continue{margin-top:4px}
.signin-dialog .signin-error{margin:0;font-size:14px;line-height:1.45;color:#9b2c24}
.signin-row{display:flex;flex-wrap:wrap;gap:6px 18px}
.signin-link{padding:6px 0;border:0;background:none;color:var(--action);font:500 14px var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.signin-dialog .signin-progress{margin:8px 0;font-weight:500}
.signin-hint a{display:block;margin-top:6px;color:var(--action)}
.signin-hint a.signin-hosted-only{display:flex;justify-content:space-between;margin-top:0;padding:14px 18px;border-radius:8px;background:var(--action);color:var(--action-ink);text-decoration:none;font-size:14px}
.signin-dialog .signin-hint{font-size:12px;color:var(--muted);margin:10px 0 22px}
.signin-invitation{border-top:1px solid var(--line);padding-top:20px;font-size:14px}
.signin-invitation p{font-size:13px;color:var(--muted);margin:6px 0 14px}
.signin-demo{display:block;padding:12px 0;font-size:14px;font-weight:600}
html:has(.signin-dialog[open]){overflow:hidden}
@media(max-width:600px){.signin-dialog{margin:18px auto auto;padding:26px 22px}}