/* Idea: Kanchipuram silk and Chennai stone. Lime plaster ground, granite ink, the brand olive as the
   one large field colour, and zari gold used only as a hairline. The arch from the Beyond Conceptz mark
   frames every photograph, traced by a gold line like a sari border; it is the page's only curve.
   Brand oxide is reserved for the primary action. */
:root{
  --ground:#EFEEE9;   /* lime plaster */
  --tone:#E4E2DA;     /* one step down, separates surfaces */
  --stone:#C9C6BC;    /* hairlines */
  --ink:#1F2420;      /* granite */
  --ink-2:#4B504A;    /* secondary notes only */
  --zari:#A8854F;     /* gold hairlines and markers, never body text */
  --zari-text:#7A5F33;/* gold when it has to be read */
  --zari-light:#CDB07A;
  --oxide:#8D3C27;    /* primary action */
  --oxide-press:#73301F;
  --olive:#414C2C;
  --olive-deep:#2F3720;
  --on-dark:#EFEEE9;
  --on-dark-2:#C4C8B8;
  --line-dark:rgba(239,238,233,.22);

  --f-head:"Marcellus","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-logo:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --t-display:clamp(2.6rem,6.6vw,6rem);
  --t-h2:clamp(2.05rem,4.2vw,3.5rem);
  --t-statement:clamp(1.45rem,2.5vw,2.2rem);
  --t-h3:clamp(1.3rem,1.8vw,1.55rem);
  --t-body:1.0625rem;
  --t-small:.9rem;
  --gap-sec:clamp(5.5rem,12vw,10rem);
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--stone) var(--ground)}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:var(--t-body);line-height:1.65;-webkit-font-smoothing:antialiased;caret-color:var(--oxide);accent-color:var(--olive);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ground)}
::selection{background:var(--olive);color:var(--on-dark)}
a{color:inherit;text-underline-offset:.24em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}
h1,h2,h3{font-family:var(--f-head);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.02em}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.015em}
h3{font-size:var(--t-h3);line-height:1.25}
p{margin:0;text-wrap:pretty}
strong,b{font-weight:600}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums lining-nums}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--on-dark);padding:.7rem 1rem}

/* Actions: square, one fill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:50px;font:500 1rem var(--f-body);letter-spacing:.01em;padding:.95rem 1.7rem;background:var(--oxide);color:#fff;border:0;text-decoration:none;cursor:pointer;transition:background .25s}
.btn:hover{background:var(--oxide-press)}
.btn:active{transform:translateY(1px)}
.btn.quiet{background:var(--ink)}
.btn.quiet:hover{background:#000}
.btn.light{background:var(--on-dark);color:var(--ink)}
.btn.light:hover{background:#fff}
.tlink{display:inline-block;font:500 1rem var(--f-body);text-decoration:none;padding:.85rem 0 .5em;background:linear-gradient(var(--zari),var(--zari)) 0 100%/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .3s var(--ease),background-size .3s var(--ease)}
.tlink:hover{color:var(--oxide);background-size:100% 1px,100% 1px}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ground);border-bottom:1px solid transparent;transition:border-color .25s}
.top.scrolled{border-bottom-color:var(--stone)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1rem}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--ink)}
.logo svg{height:44px;width:auto;flex:none;color:var(--olive)}
.wm{display:flex;flex-direction:column;line-height:1}
.wm b{font-family:var(--f-logo);font-weight:700;font-size:1.22rem;letter-spacing:.02em}
.wm span{font-family:var(--f-logo);font-weight:400;font-size:.68rem;letter-spacing:.34em;margin-top:5px}
#nav ul{display:flex;gap:2.2rem;list-style:none;margin:0;padding:0}
#nav a{text-decoration:none;font-weight:500;font-size:.95rem;padding-block:.4rem}
#nav a:hover{text-decoration:underline;text-decoration-color:var(--zari)}
.top .btn{min-height:44px;padding:.65rem 1.2rem;font-size:.93rem}
.menu-btn{display:none;min-height:44px;background:none;color:var(--ink);border:1px solid var(--ink);padding:.5rem 1.1rem;font:500 .95rem var(--f-body);cursor:pointer}
@media (max-width:980px){
  .menu-btn{display:inline-block}
  #nav{position:absolute;left:0;right:0;top:100%;background:var(--ground);border-bottom:1px solid var(--stone)}
  #nav ul{flex-direction:column;gap:0;padding:.5rem max(24px,env(safe-area-inset-right,0px)) 1.25rem max(24px,env(safe-area-inset-left,0px))}
  #nav li + li{border-top:1px solid var(--tone)}
  #nav li a{display:block;padding:.95rem 0;font-family:var(--f-head);font-size:1.35rem;font-weight:400}
  .top .cta{display:none}
}

/* Arch frame: the photo, and a gold line traced outside it */
.arch{position:relative;border-radius:999px 999px 0 0;overflow:hidden;background:var(--tone);aspect-ratio:4/5;width:100%;outline:1px solid var(--zari);outline-offset:10px}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
figure{margin:0}
figcaption{font-size:var(--t-small);color:var(--ink-2);margin-top:1.4rem}

/* Hero: the one orchestrated moment */
.hero{padding-block:clamp(2.5rem,6vw,5rem) var(--gap-sec)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2.5rem,6vw,6rem);align-items:end}
.hero h1{max-width:none;font-size:clamp(2.8rem,5.2vw,4.7rem)}
.hero .lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;max-width:38ch;color:var(--ink-2);margin-top:clamp(1.6rem,3vw,2.4rem)}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem;margin-top:2.4rem}
.hero-pic{position:relative;padding:11px 11px 0}
.hero-pic .arch{aspect-ratio:4/5;max-height:80vh;animation:rise 1.6s var(--ease) .1s both}
.hero-pic img{animation:settle 2.6s var(--ease) both}
@keyframes rise{from{clip-path:inset(100% -24px -24px -24px)}to{clip-path:inset(-24px -24px -24px -24px)}}
@keyframes settle{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-copy{animation:appear 1.2s var(--ease) .5s both}
@keyframes appear{from{opacity:0}to{opacity:1}}
.facts{list-style:none;margin:clamp(3.5rem,7vw,5.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem clamp(1.5rem,4vw,3.5rem)}
.facts li{border-top:1px solid var(--zari);padding-top:1.1rem;font-size:1rem;max-width:30ch}
.facts svg{display:none}
@media (max-width:860px){
  .hero-top{grid-template-columns:minmax(0,1fr)}
  .hero-pic{order:-1;max-width:460px}
  .facts{grid-template-columns:minmax(0,1fr)}
}

/* About: olive field */
.about{background:var(--olive);color:var(--on-dark);padding-block:var(--gap-sec)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2.5rem,7vw,7rem)}
.about h2{max-width:12ch}
.statement{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.6;margin-top:1.8rem;max-width:40ch;color:var(--on-dark)}
.about .body{display:grid;gap:1.3rem;align-content:end;color:var(--on-dark-2);max-width:46ch;border-top:1px solid var(--zari-light);padding-top:1.6rem}
.about .body strong{color:var(--on-dark)}
@media (max-width:820px){.about-grid{grid-template-columns:minmax(0,1fr)}}

/* Section heads */
.sec{padding-block:var(--gap-sec) 0}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 5rem;align-items:end;margin-bottom:clamp(3rem,6vw,4.5rem)}
.head p{max-width:44ch;color:var(--ink-2)}
@media (max-width:820px){.head{grid-template-columns:minmax(0,1fr)}}

/* Services: one arch that follows the list */
.svc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.svc-pic{position:sticky;top:120px;padding:11px 11px 0}
.svc-pic .arch img{transition:opacity .5s var(--ease)}
.svc-pic .arch img.off{opacity:0}
.svc-cap{font-size:var(--t-small);color:var(--ink-2);margin-top:1.4rem}
.svc-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--stone)}
.svc-list > li{border-top:1px solid var(--stone);padding:1.5rem 0}
.svc-list h3 button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:44px}
.svc-list button:focus-visible{outline:2px solid var(--oxide);outline-offset:4px}
.svc-list h3{font-size:clamp(1.55rem,2.6vw,2.15rem);transition:color .25s}
.svc-list li:not(.on) h3 button:hover{color:var(--olive)}
.svc-list h3 svg{width:20px;height:20px;flex:none;color:var(--zari);transition:transform .35s var(--ease)}
.svc-list li.on h3 svg{transform:rotate(45deg)}
.svc-list .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.svc-list li.on .more{grid-template-rows:1fr}
.svc-list .more > div{overflow:hidden}
.svc-list .more p{margin-top:.9rem;max-width:48ch;color:var(--ink-2)}
.svc-list .more ul{margin:.9rem 0 0;padding-left:1.1rem;display:grid;gap:.3rem}
.svc-list .more li{padding:0}
.svc-list .more li::marker{color:var(--zari)}
@media (max-width:860px){.svc{grid-template-columns:minmax(0,1fr)}.svc-pic{position:relative;top:0;max-width:420px}}

/* 3D model: a tone field */
.model{background:var(--tone);padding-block:var(--gap-sec);margin-top:var(--gap-sec)}
.model-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.model-grid .copy p{margin-top:1.4rem;max-width:40ch;color:var(--ink-2)}
.model-grid .copy ul{margin:1.6rem 0 0;padding-left:1.1rem;display:grid;gap:.4rem}
.model-grid .copy li::marker{color:var(--zari)}
.stage{position:relative;background:var(--ground);aspect-ratio:5/4;min-width:0;overflow:hidden;border:1px solid var(--stone)}
.stage canvas{display:block;width:100%!important;height:100%!important;cursor:grab;touch-action:pan-y}
.stage canvas:active{cursor:grabbing}
.stage .fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage-bar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;pointer-events:none}
.stage-bar > *{pointer-events:auto}
.stage-hint{font-size:var(--t-small);color:var(--ink-2)}
.seg2{display:inline-flex;background:var(--ground);border:1px solid var(--stone)}
.seg2 button{min-height:44px;font:500 .9rem var(--f-body);padding:.6rem 1.05rem;border:0;background:transparent;color:var(--ink);cursor:pointer}
.seg2 button[aria-pressed="true"]{background:var(--olive);color:var(--on-dark)}
@media (max-width:900px){.model-grid{grid-template-columns:minmax(0,1fr)}.stage{aspect-ratio:1/1}}

/* Collections */
.tabs{display:inline-flex;flex-wrap:wrap;gap:0 2.2rem;border-bottom:1px solid var(--stone)}
.tabs button{min-height:52px;font:400 clamp(1.25rem,2vw,1.5rem) var(--f-head);padding:.6rem 0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:transparent;color:var(--ink-2);cursor:pointer;transition:color .2s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--olive)}
.coll{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(2rem,6vw,6rem);margin-top:3rem;align-items:start}
.tier-name{font-size:var(--t-h2)}
.tier-rate{font-family:var(--f-head);font-size:var(--t-h3);margin-top:1.1rem}
.tier-rate span{font-family:var(--f-body);font-size:var(--t-body);color:var(--ink-2)}
.tier-desc{margin-top:1.1rem;max-width:34ch;color:var(--ink-2)}
.spec{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--stone)}
.spec li{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1.5rem;padding:1rem 0;border-top:1px solid var(--stone)}
.spec li span{font-weight:600}
.note{font-size:var(--t-small);color:var(--ink-2);margin-top:1.2rem}
@media (max-width:860px){.coll{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.spec li{grid-template-columns:minmax(0,1fr);gap:.15rem}}

/* Planner: olive field */
.planner{background:var(--olive);color:var(--on-dark);margin-top:clamp(4rem,8vw,6.5rem)}
.planner-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.planner .l{padding:clamp(2rem,4.5vw,3.8rem)}
.planner .r{padding:clamp(2rem,4.5vw,3.8rem);background:var(--olive-deep)}
.planner .l > p{color:var(--on-dark-2);margin-top:1.1rem;max-width:40ch}
.ctrl{display:grid;gap:1.9rem;margin-top:2.4rem}
.ctrl .lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem;font-weight:500;color:var(--on-dark-2)}
.ctrl output{font-family:var(--f-head);font-size:var(--t-h3);color:var(--on-dark)}
input[type=range].r{width:100%;accent-color:var(--zari-light);height:28px}
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opts button{min-height:44px;font:500 .95rem var(--f-body);padding:.6rem 1.05rem;border:1px solid var(--line-dark);background:transparent;color:var(--on-dark);cursor:pointer;transition:border-color .2s}
.opts button:hover{border-color:var(--on-dark-2)}
.opts button[aria-pressed="true"]{background:var(--on-dark);color:var(--olive-deep);border-color:var(--on-dark)}
.est-k{font-weight:500;color:var(--zari-light)}
.est-v{font-family:var(--f-head);font-size:var(--t-h2);line-height:1.05;margin-top:.5rem}
.est-s{color:var(--on-dark-2);margin-top:.5rem}
.sched{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.7rem}
.sched li{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) 4.6rem;gap:.9rem;align-items:center;font-size:var(--t-small)}
.sched .bar{height:4px;background:var(--line-dark)}
.sched .bar i{display:block;height:100%;background:var(--zari-light);transition:width .5s var(--ease)}
.sched .amt{text-align:right;font-weight:600}
.planner .btn{margin-top:2.2rem}
@media (max-width:860px){.planner-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:420px){.sched li{grid-template-columns:minmax(0,1fr) 4.4rem}.sched .bar{grid-column:1/-1;grid-row:2}}

/* Process: a real sequence, so it is numbered */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2rem 1.8rem;counter-reset:step}
.steps li{position:relative;border-top:1px solid var(--zari);padding-top:1.2rem;min-width:0;counter-increment:step}
.steps li::before{content:counter(step);display:block;font-family:var(--f-head);font-size:clamp(2.2rem,3.4vw,3rem);line-height:1;color:var(--zari-text);margin-bottom:1.1rem}
.steps p{margin-top:.5rem;font-size:var(--t-small);color:var(--ink-2)}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}

/* Updates */
.upd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.upd .copy p{margin-top:1.4rem;max-width:44ch;color:var(--ink-2)}
.feed{background:var(--tone);padding:1.5rem;max-width:460px;width:100%;justify-self:end}
.feed-h{display:flex;align-items:center;gap:.85rem;padding-bottom:1.2rem}
.feed-h .av{width:42px;height:42px;background:var(--olive);display:grid;place-items:center;color:var(--on-dark)}
.feed-h b{display:block;line-height:1.25}
.feed-h small{color:var(--ink-2);font-size:var(--t-small)}
.msg{background:var(--ground);padding:.95rem;display:grid;grid-template-columns:72px minmax(0,1fr);gap:1rem;align-items:center;margin-top:.5rem}
.msg img{width:72px;height:72px;object-fit:cover;display:block}
.msg p{font-size:var(--t-small);line-height:1.5;margin-top:.15rem;color:var(--ink-2)}
.st{display:inline-block;font:500 .82rem var(--f-body);padding:.12rem .5rem;margin-left:.45rem;vertical-align:1px}
.st.ok{background:var(--olive);color:var(--on-dark)}
.st.now{background:var(--oxide);color:#fff}
@media (max-width:860px){.upd{grid-template-columns:minmax(0,1fr)}.feed{justify-self:start}}

/* Project */
.proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.proj figure{padding:11px 11px 0}
.proj .copy p{margin-top:1.4rem;max-width:42ch;color:var(--ink-2)}
.proj dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 2.5rem;margin:2.2rem 0;border-bottom:1px solid var(--stone)}
.proj dt,.proj dd{border-top:1px solid var(--stone);padding:.8rem 0}
.proj dt{font-weight:600}
.proj dd{margin:0}
@media (max-width:860px){.proj{grid-template-columns:minmax(0,1fr)}.proj figure{max-width:440px}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.faq-grid .side p{margin-top:1.3rem;max-width:32ch;color:var(--ink-2)}
.faq{border-bottom:1px solid var(--stone)}
.faq details{border-top:1px solid var(--stone)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;font-family:var(--f-head);font-size:1.3rem;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:18px;height:18px;flex:none;color:var(--zari);transition:transform .35s var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding:0 0 1.5rem;max-width:62ch;color:var(--ink-2)}
@media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr)}}

/* Contact: olive field */
.contact{background:var(--olive-deep);color:var(--on-dark);padding-block:var(--gap-sec);margin-top:var(--gap-sec)}
.c-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.contact .side p{margin-top:1.4rem;max-width:36ch;color:var(--on-dark-2)}
.reach{margin-top:2.6rem;border-bottom:1px solid var(--line-dark)}
.reach div{display:grid;gap:.15rem;border-top:1px solid var(--line-dark);padding:1rem 0}
.reach small{font-size:var(--t-small);color:var(--zari-light)}
.reach b{font-weight:500;font-size:1.1rem;overflow-wrap:anywhere}
.copy-btn{justify-self:start;min-height:44px;display:inline-flex;align-items:center;font:500 .9rem var(--f-body);background:none;border:0;color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--zari-light);text-underline-offset:.35em;padding:0;cursor:pointer}
.formcard{background:var(--ground);color:var(--ink);padding:clamp(1.6rem,4vw,3.2rem)}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.8rem}
.field{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.field.full{grid-column:1/-1}
.field label,.field .lab{font-weight:500;font-size:.93rem;color:var(--ink-2)}
.field input,.field select,.field textarea{font:400 1.05rem var(--f-body);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--stone);border-radius:0;padding:.6rem 0;width:100%;min-height:46px;transition:border-color .2s}
.field select{appearance:none;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A8854F' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .2rem center;padding-right:1.6rem}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--olive);padding-bottom:calc(.6rem - 1px)}
.field input::placeholder,.field textarea::placeholder{color:#8C8F88}
.field input[aria-invalid="true"]{border-bottom-color:var(--oxide)}
.err{color:var(--oxide);font-size:var(--t-small);min-height:1.2em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.chips label{cursor:pointer;position:relative}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;opacity:0;pointer-events:none}
.chips span{display:inline-flex;align-items:center;min-height:44px;font:500 .95rem var(--f-body);padding:.5rem 1.05rem;border:1px solid var(--stone);transition:border-color .2s,background .2s}
.chips label:hover span{border-color:var(--ink-2)}
.chips input:checked + span{background:var(--olive);border-color:var(--olive);color:var(--on-dark)}
.chips input:focus-visible + span{outline:2px solid var(--oxide);outline-offset:2px}
form .btn{grid-column:1/-1;justify-self:start;margin-top:.4rem}
.result{grid-column:1/-1;background:var(--tone);padding:1.3rem 1.4rem;display:grid;gap:.8rem}
.result[hidden]{display:none}
.result pre{margin:0;white-space:pre-wrap;font:400 .95rem/1.6 var(--f-body)}
.result .row{display:flex;flex-wrap:wrap;gap:.6rem}
@media (max-width:900px){.c-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:540px){form{grid-template-columns:minmax(0,1fr)}}

/* Footer: granite, and the name returns */
footer{background:var(--ink);color:var(--on-dark-2)}
.f-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:2.5rem;padding-block:5rem 3.5rem}
footer h2{font-size:var(--t-h3);color:var(--on-dark)}
footer ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem}
footer a{text-decoration:none}
footer a:hover{color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--zari-light)}
footer .lead{max-width:34ch;margin-top:1.1rem}
.f-name{color:var(--on-dark);display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);padding-bottom:2rem;border-top:1px solid var(--zari);padding-top:2.4rem}
.f-name svg{height:clamp(64px,13.5vw,196px);width:auto;flex:none;color:var(--zari-light)}
.f-name .wm-big{display:flex;flex-direction:column;line-height:.9}
.f-name .wm-big b{font-family:var(--f-logo);font-weight:700;font-size:clamp(2.4rem,9vw,8rem);letter-spacing:.01em}
.f-name .wm-big span{font-family:var(--f-logo);font-weight:400;font-size:clamp(1rem,3.7vw,3.3rem);letter-spacing:.34em;margin-top:.35em;color:var(--on-dark-2)}
.f-base{padding-block:1.2rem calc(1.4rem + env(safe-area-inset-bottom,0px));font-size:var(--t-small);background:#181C19}
.f-base-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
@media (max-width:760px){.f-top{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition-property:opacity,color,background-color,border-color!important}}

#nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--zari);text-decoration-thickness:1px;text-underline-offset:.5em}

/* Page hero for inner pages */
.phero{padding-block:clamp(3rem,7vw,6rem) 0}
.phero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:end}
.phero.has-pic .phero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.phero h1{max-width:14ch}
.phero .lede{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;max-width:40ch;margin-top:1.8rem;color:var(--ink-2)}
.phero-pic{padding:11px 11px 0}
.phero-pic .arch{aspect-ratio:4/5;max-height:70vh;animation:rise 1.4s var(--ease) both}
.phero-pic img{animation:settle 2.4s var(--ease) both}
@media (max-width:860px){.phero.has-pic .phero-grid{grid-template-columns:minmax(0,1fr)}.phero-pic{max-width:440px}}

/* Text beside an arch photo */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.split figure{padding:11px 11px 0}
.split .copy p{margin-top:1.4rem;max-width:44ch;color:var(--ink-2)}
.split .arch{max-width:460px}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}

/* Commitments: hairline columns, no boxes */
.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.6rem clamp(2rem,5vw,4.5rem)}
.values > div{border-top:1px solid var(--zari);padding-top:1.4rem}
.values p{margin-top:.7rem;max-width:46ch;color:var(--ink-2)}
@media (max-width:700px){.values{grid-template-columns:minmax(0,1fr)}}

/* Collections preview on the home page */
.tiers-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--stone);border-bottom:1px solid var(--stone)}
.tier-link{display:flex;flex-direction:column;gap:.7rem;padding:clamp(1.6rem,3.5vw,2.6rem);text-decoration:none;transition:background .3s}
.tier-link + .tier-link{border-left:1px solid var(--stone)}
.tier-link:hover{background:var(--tone)}
.tier-link.on{background:var(--olive);color:var(--on-dark)}
.tier-link.on:hover{background:var(--olive-deep)}
.tier-link.on .t-desc{color:var(--on-dark-2)}
.t-name{font-family:var(--f-head);font-size:clamp(1.6rem,2.4vw,2rem)}
.t-rate{font-weight:600}
.t-desc{color:var(--ink-2)}
@media (max-width:860px){.tiers-row{grid-template-columns:minmax(0,1fr)}.tier-link + .tier-link{border-left:0;border-top:1px solid var(--stone)}}

/* Services page rows, alternating */
.srows{display:grid;gap:var(--gap-sec)}
.srow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.5rem,7vw,7rem);align-items:center}
.srow figure{padding:11px 11px 0}
.srow .arch{max-width:460px}
.srow.flip figure{order:2;justify-self:end;width:100%;max-width:482px}
.srow .copy p{margin-top:1.3rem;max-width:44ch;color:var(--ink-2)}
.srow .copy ul{margin:1.5rem 0 0;padding:0;list-style:none;border-bottom:1px solid var(--stone)}
.srow .copy li{border-top:1px solid var(--stone);padding:.7rem 0}
@media (max-width:860px){.srow{grid-template-columns:minmax(0,1fr)}.srow.flip figure{order:0;justify-self:start}}

/* Call to action band */
.cta-band{background:var(--olive);color:var(--on-dark);padding-block:clamp(4.5rem,9vw,7rem);margin-top:var(--gap-sec)}
.cta-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:1.5rem 3.5rem;align-items:center}
.cta-in p{color:var(--on-dark-2);max-width:34ch}
@media (max-width:900px){.cta-in{grid-template-columns:minmax(0,1fr)}.cta-in .btn{justify-self:start}}

/* Contact page opens with the contact section */
.contact.first{margin-top:0}
.contact h1{font-size:var(--t-h2);line-height:1.08}

/* When the planner closes a page, the call to action continues its field */
.sec:has(.planner) + .cta-band{margin-top:0;border-top:1px solid var(--zari)}

/* design-md + taste: every arch opens once as it comes into view, the hero's move carried down the page.
   Content stays visible without script; the hidden state exists only while motion is allowed. */
@media (prefers-reduced-motion:no-preference){
  .js .arch.await{clip-path:inset(100% -24px -24px -24px)}
  .js .arch.open{animation:rise 1.2s var(--ease) both}
}

/* Standalone services: three across */
.values.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.values.three{grid-template-columns:minmax(0,1fr)}}

/* Contact additions */
.cta-in .tel{color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--zari-light);text-underline-offset:.3em;white-space:nowrap}
.reach a:not(.copy-btn){text-decoration:none}
.reach a:not(.copy-btn):hover{text-decoration:underline;text-decoration-color:var(--zari-light)}
.reach .copy-btn{display:inline-block;margin-top:.2rem}
.copy-btn.dark{color:var(--ink);text-decoration-color:var(--zari);align-self:center;margin-left:.6rem}

/* UI UX Pro Max: sticky contact on phones, where most enquiries start */
.callbar{display:none}
@media (max-width:760px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--ground);border-top:1px solid var(--stone);padding:.6rem max(16px,env(safe-area-inset-left,0px)) calc(.6rem + env(safe-area-inset-bottom,0px));gap:.6rem}
  .callbar a{display:flex;align-items:center;justify-content:center;min-height:46px;font:500 .98rem var(--f-body);text-decoration:none}
  .callbar .c1{border:1px solid var(--ink);color:var(--ink);background:var(--ground)}
  .callbar .c2{background:var(--olive);color:var(--on-dark)}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
}

/* A tone field followed by the call to action: no plaster strip between them */
.model + .cta-band{margin-top:0}

/* City note on the planner result */
.est-note{margin-top:1.4rem;font-size:var(--t-small);color:var(--on-dark-2)}

/* Mobile pass: phone number is a full-size tap target; first screen shows the headline under a shorter arch */
.reach b a{display:inline-block;padding-block:.55rem}
@media (max-width:600px){.hero-pic .arch{aspect-ratio:6/5}.hero{padding-top:1.5rem}.hero .lede{margin-top:1.2rem}}
/* Guard against sub-pixel overflow (768px measured 1px with no element outside the frame) */
html,body{overflow-x:clip}

/* Hero quick enquiry: two fields, sent on WhatsApp */
.quick{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.9rem 1.2rem;align-items:end;margin-top:2.2rem;max-width:640px}
.q-field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.q-field label{font-size:.9rem;font-weight:500;color:var(--ink-2)}
.q-field input{font:400 1.05rem var(--f-body);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--stone);border-radius:0;padding:.55rem 0;min-height:48px;width:100%}
.q-field input:focus{outline:none;border-bottom:2px solid var(--olive);padding-bottom:calc(.55rem - 1px)}
.q-field input[aria-invalid="true"]{border-bottom-color:var(--oxide)}
.q-err{grid-column:1/-1;color:var(--oxide);font-size:var(--t-small);min-height:1.2em;margin:0}
.q-alt{font-size:var(--t-small);color:var(--ink-2);margin-top:.2rem}
.q-alt .tlink{font-size:var(--t-small);padding:.6rem 0 .35em}
@media (max-width:640px){.quick{grid-template-columns:minmax(0,1fr)}.quick .btn{width:100%}}

/* Whole house versus interiors only */
.cmp{border-top:1px solid var(--stone)}
.cmp-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--stone)}
.cmp-row > span{padding:1.15rem 1.4rem 1.15rem 0}
.cmp-row > span:first-child{font-weight:600}
.cmp-row > span:nth-child(2){color:var(--ink-2)}
.cmp-row > span:last-child{background:var(--olive);color:var(--on-dark);padding-left:1.4rem}
.cmp-head > span{font-family:var(--f-head);font-size:var(--t-h3);padding-block:1.3rem}
.cmp-head > span:last-child{color:var(--on-dark)}
@media (max-width:760px){
  .cmp-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp-row > span:first-child{grid-column:1/-1;padding:1rem 0 .3rem}
  .cmp-row > span:nth-child(2){padding:.2rem 1rem 1rem 0}
  .cmp-row > span:last-child{padding:.8rem 1rem}
  .cmp-head > span:first-child{display:none}
  .cmp-head > span{font-size:1.15rem;line-height:1.3}
}

/* Offer stamp: a seal on the hero arch, real included offers only */
.hero-pic{position:relative}
.stamp{position:absolute;z-index:2;left:-26px;bottom:42px;width:136px;height:136px;border-radius:50%;background:var(--oxide);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;transform:rotate(-8deg);box-shadow:0 0 0 4px var(--ground),0 0 0 5px var(--zari);animation:stamp .7s var(--ease) 1.3s both}
.stamp b{font-family:var(--f-head);font-weight:400;font-size:1.9rem;line-height:1}
.stamp span{font-size:.74rem;line-height:1.25;margin-top:.35rem}
@keyframes stamp{from{opacity:0;transform:rotate(-8deg) scale(.6)}to{opacity:1;transform:rotate(-8deg) scale(1)}}
@media (max-width:860px){.stamp{left:auto;right:-6px;bottom:24px;width:112px;height:112px;padding:14px}.stamp b{font-size:1.55rem}.stamp span{font-size:.66rem}}

/* Stats row: large figures on gold hairlines */
.stats{list-style:none;margin:clamp(3.5rem,7vw,5.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.8rem clamp(1.5rem,3.5vw,3rem)}
.stats li{border-top:1px solid var(--zari);padding-top:1.1rem;display:grid;gap:.45rem;align-content:start}
.stats b{font-family:var(--f-head);font-weight:400;font-size:clamp(1.9rem,2.9vw,2.6rem);line-height:1;color:var(--olive)}
.stats span{font-size:.98rem;color:var(--ink-2);max-width:24ch}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Pop-up enquiry */
.pop{border:0;padding:clamp(1.8rem,4vw,2.8rem);max-width:min(520px,calc(100vw - 32px));width:100%;background:var(--ground);color:var(--ink);box-shadow:0 30px 80px rgba(31,36,32,.35);overflow:visible}
.pop::backdrop{background:rgba(31,36,32,.55)}
.pop[open]{animation:popin .45s var(--ease)}
@keyframes popin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pop h2{font-size:clamp(1.8rem,4vw,2.4rem);margin-top:.2rem;max-width:12ch}
.pop > p{margin-top:.9rem;color:var(--ink-2)}
.pop .quick{grid-template-columns:minmax(0,1fr);margin-top:1.4rem}
.pop .quick .btn{width:100%}
.pop-x{position:absolute;top:10px;right:10px}
.pop-x button{min-height:44px;min-width:44px;background:none;border:0;font:500 .9rem var(--f-body);color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--zari);text-underline-offset:.3em;cursor:pointer}
.stamp.in-pop{position:absolute;left:auto;right:-30px;top:-46px;bottom:auto;width:104px;height:104px;padding:12px;animation:none}
.stamp.in-pop b{font-size:1.4rem}.stamp.in-pop span{font-size:.6rem}

/* Floating WhatsApp on desktop; phones use the call bar */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:54;display:inline-flex;align-items:center;min-height:50px;padding:0 1.3rem;background:var(--olive);color:var(--on-dark);font:500 .98rem var(--f-body);text-decoration:none;box-shadow:0 10px 30px rgba(31,36,32,.28);transition:background .3s var(--ease)}
.wa-float:hover{background:var(--olive-deep)}
.wa-float::before{content:"";width:10px;height:10px;border-radius:50%;background:#7FD18A;margin-right:.65rem;box-shadow:0 0 0 3px rgba(127,209,138,.25)}
@media (max-width:760px){.wa-float{display:none}}
/* The seal never takes a tap; Close always sits on top, and on phones the seal moves to the other corner */
.stamp{pointer-events:none}
.pop-x{z-index:3}
@media (max-width:640px){.stamp.in-pop{right:auto;left:-8px;top:-52px;width:92px;height:92px}.pop{margin-top:max(64px,10vh)}}
.pop h2:focus{outline:none}