/* ==========================================================================
   Kaldrin Developments: new look for the inner pages
   (/work, /plans, the legal pages and 404). Loaded last, after base,
   components, motion, the page's own stylesheet and chrome.css. It re-points
   the original tokens at the new palette and restyles shared pieces; markup
   and behaviour (header.js, configurator.js, form.js) are unchanged.
   ========================================================================== */
:root{
  --bg:#0F1011;
  --frame:#0F1011;
  --surface:#16171A;
  --surface-2:#1C1D20;
  --surface-3:#232428;
  --line:#2A2A2C;
  --line-2:#36363A;
  --line-3:#5A5752;
  --text-strong:#EEEAE3;
  --text-muted:#A9A297;
  --text-faint:#8A857D;
  --focus:var(--accent);
  --error:#E6B3A2;
  --header-h:var(--nav-h);
}
body{background:var(--canvas)}
::selection{background:var(--accent-muted);color:var(--text-primary)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip-link{z-index:110}

/* The page is no longer a bordered "document": the environment shows through */
.page{background:transparent;border-inline:0}
.section{border-top-color:var(--line)}

/* ---------- type ---------- */
.display{font-weight:500;text-transform:none;letter-spacing:.005em;line-height:1.04}
.display--xl{font-size:clamp(3rem,1.6rem + 5vw,6.4rem);line-height:.98}
.display--lg{font-size:clamp(2.4rem,1.5rem + 3vw,4.4rem)}
.display--md{font-size:clamp(1.8rem,1.3rem + 1.4vw,2.6rem)}
.label{display:flex;align-items:center;gap:16px;font-size:10.5px;letter-spacing:.24em;color:var(--text-secondary)}
.label::after{content:"";width:56px;height:1px;background:var(--accent);flex:none;transform-origin:left}
@media (prefers-reduced-motion: no-preference){
  .js .label[data-reveal]::after{transform:scaleX(0);transition:transform 1.1s var(--ease-out) .25s}
  .js .label[data-reveal].is-in::after{transform:none}
}
.meta{letter-spacing:.2em}
.lede{color:var(--text)}

/* ---------- buttons and links ---------- */
.btn{font-size:11.5px;font-weight:600;letter-spacing:.18em;border-radius:1px;transition:color .35s var(--ease-out),border-color .35s var(--ease-out),background-color .35s var(--ease-out),transform .35s var(--ease-out),translate .5s var(--ease-out)}
.btn--sm{min-height:42px;padding:0 18px}
.btn--solid{background:var(--btn-fill);color:var(--btn-ink)}
.btn--outline{border-color:rgba(238,234,227,.42);color:var(--text-primary);background:rgba(15,16,17,.25)}
.btn--outline::before{display:none}
@media (hover:hover){
  .btn--solid:hover{background:var(--btn-fill-hover);transform:translateY(-1px)}
  .btn--outline:hover{color:var(--text-primary);border-color:var(--text-primary);transform:translateY(-1px)}
  .text-link:hover .arrow,.btn:hover .arrow{background:currentColor}
}
.text-link{background:none;border-bottom:1px solid var(--line-3);min-height:0;padding-bottom:6px;transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.text-link:hover{border-color:var(--accent)}

/* ---------- form fields ---------- */
.field label{font-size:10.5px;letter-spacing:.2em;color:var(--text)}
.req{color:var(--accent)}
.field input,.field select,.field textarea{background:rgba(15,16,17,.7);border-color:#5F5B55;border-radius:1px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#8A857D}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:rgba(15,16,17,.92)}
.select select option{background:#16171A}

/* ---------- page heads: shared shape ---------- */
.work-head,.plans-hero,.legal-head{position:relative;isolation:isolate;border-bottom:1px solid var(--line)}
.head-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.head-bg img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.head-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,16,17,.55) 0%,rgba(15,16,17,.35) 35%,rgba(15,16,17,.82) 75%,var(--canvas) 100%)}
.head-bg.side::after{background:linear-gradient(90deg,var(--canvas) 0%,rgba(15,16,17,.86) 38%,rgba(15,16,17,.35) 70%,rgba(15,16,17,.55) 100%),linear-gradient(180deg,rgba(15,16,17,0) 60%,var(--canvas) 100%)}
@media (prefers-reduced-motion: no-preference){
  .head-bg img{animation:head-settle 2.4s var(--ease-out) both}
  @keyframes head-settle{from{transform:scale(1.08);opacity:0}to{transform:none;opacity:1}}
}
.work-head h1,.plans-hero h1,.legal-head h1,.work-cta h2{text-shadow:var(--tshadow)}

/* ---------- /work ---------- */
.work-head{min-height:min(84vh,780px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--nav-h) + 80px);padding-bottom:clamp(48px,6vw,88px)}
.work-head .display{max-width:12ch}
.work-head .lede{color:var(--text);max-width:44ch}
.shot{background:var(--surface);border-color:var(--line-2);transition:border-color .5s var(--ease-out),box-shadow .8s var(--ease-out)}
.shot__bar{background:#121315;border-bottom-color:var(--line)}
a.shot:hover,a.shot:focus-visible{border-color:rgba(212,163,115,.55);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.project{border-bottom-color:var(--line)}
.project__num{font-weight:500;color:var(--line-3);transition:color .6s var(--ease-out)}
.project:hover .project__num{color:var(--accent)}
.project__body p{color:var(--text)}
.tags li{border-color:var(--line);color:var(--text-secondary);font-size:10.5px}
.tags li.tags__lead{color:var(--accent);border-color:rgba(212,163,115,.45)}
.work-cta{position:relative;isolation:isolate;overflow:hidden;min-height:min(80vh,740px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.work-cta .label{justify-content:center}
.work-cta .label::before{content:"";width:56px;height:1px;background:var(--accent);flex:none}
.work-cta .lede{color:var(--text)}

/* ---------- /plans ---------- */
.plans-hero{min-height:min(78vh,740px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--nav-h) + 72px)}
.plans-hero .display--xl{font-size:clamp(3rem,1.6rem + 5vw,6rem)}
.plans-hero__foot .lede{color:var(--text)}
.plans-hero__foot .lede strong{color:var(--text-primary);font-weight:500}
.billing__toggle{border-color:var(--line-3);background:rgba(15,16,17,.6)}
.billing__save.is-on{color:var(--accent)}
.cfg-step__num{font-weight:500}
.cfg-step.is-active .cfg-step__num{color:var(--accent)}
.cfg-step.is-active .cfg-step__rule{background:var(--accent)}
.cfg-step .display--md{font-size:clamp(1.8rem,1.3rem + 1.4vw,2.5rem)}
.cfg-plan{background:var(--surface);border-color:var(--line)}
.cfg-plan::before{background:var(--accent);height:2px}
.cfg-plan[aria-checked="true"]{background:linear-gradient(160deg,rgba(212,163,115,.10),var(--surface-2) 58%);border-color:rgba(212,163,115,.45)}
.cfg-plan[aria-checked="true"]::before{background:var(--accent)}
.cfg-plan__radio{border-radius:50%}
.cfg-plan__radio::after{border-radius:50%;background:var(--accent)}
.cfg-plan[aria-checked="true"] .cfg-plan__radio{border-color:var(--accent)}
.cfg-plan__amount,.cfg-foundation__price,.cfg-tier__price,.cfg-svc__price,.cfg-summary__amount,.cfg-mbar__amount{font-weight:500}
.cfg-plan__list li::before,.cfg-feature__list li::before,.cfg-svc__includes li::before{background:var(--accent)}
.cfg-foundation{background:var(--surface);border-color:var(--line)}
.cfg-foundation__title,.cfg-summary__name{font-weight:500;text-transform:none;letter-spacing:.005em;font-size:1.75rem}
.cfg-foundation__icon{color:var(--accent)}
.cfg-feature{background:var(--surface-2);border-color:var(--line)}
.cfg-feature::before{background:var(--accent)}
.cfg-feature__note,.cfg-svc__note{border-left-color:var(--accent)}
.cfg-seg{background:rgba(15,16,17,.6);border-color:var(--line-2)}
.cfg-seg__fill{background:var(--surface-3);border-color:var(--line-3);border-top:2px solid var(--accent)}
.cfg-svc::before{background:var(--accent);width:2px}
.cfg-svc.is-on{background:linear-gradient(90deg,rgba(212,163,115,.07),var(--surface-2) 40%)}
.cfg-svc.is-on .cfg-svc__box{background:var(--accent);border-color:var(--accent)}
.cfg-svc__box{border-radius:1px}
.cfg-summary__in{position:relative;background:var(--surface);border-color:var(--line)}
.cfg-summary__in::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent)}
.cfg-summary--sheet .cfg-summary__in::before{display:none}
.cfg-summary__tag.is-on{color:var(--accent);border-color:rgba(212,163,115,.45)}
.cfg-summary--review .cfg-summary__foot{background:linear-gradient(160deg,rgba(212,163,115,.10),var(--surface-2) 60%);border-left-color:var(--line)}
.cfg-summary__year strong{color:var(--accent)}
.cfg-mbar{background:rgba(15,16,17,.92);border-top-color:var(--line)}
.cfg-dialog{background:#16171A;border-color:var(--line-2);color:var(--text)}
.cfg-dialog::backdrop{background:rgba(8,8,10,.78)}

/* ---------- legal pages ---------- */
.legal-head{padding-top:calc(var(--nav-h) + clamp(64px,8vw,120px));background:radial-gradient(ellipse 70% 120% at 85% 0%,rgba(212,163,115,.08),rgba(212,163,115,0) 60%)}
.legal-head .lede{color:var(--text)}
.legal-toc a span{color:var(--accent)}
.legal-toc a:hover{color:var(--text-primary)}
.legal-content h2{font-weight:500;text-transform:none;letter-spacing:.005em;font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem)}
.legal-content h2 .legal-num{color:var(--accent);font-size:.62em}
.legal-content h3{letter-spacing:.16em;font-size:11.5px}
.legal-content p,.legal-content li{color:var(--text)}
.legal-content ul li::before{background:var(--accent)}
.legal-content a{text-decoration-color:var(--accent)}
.legal-table td{color:var(--text-secondary)}
.legal-contact{background:var(--surface);border-color:var(--line);border-left:2px solid var(--accent)}
.legal-others a span:first-child{font-weight:500;text-transform:none;letter-spacing:0;font-size:1.5rem}
.legal-others a[aria-current="page"]{background:linear-gradient(160deg,rgba(212,163,115,.10),var(--surface-2) 60%)}
.legal-others a[aria-current="page"] span:last-child{color:var(--accent)}

/* ---------- 404 ---------- */
.legal-head.not-found{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(56px,8vw,112px);background:none;border-bottom:0}
.legal-head.not-found .btn-row{margin-top:32px}
.head-bg.door img{object-position:50% 38%}
.head-bg.door::after{background:linear-gradient(90deg,var(--canvas) 0%,rgba(15,16,17,.8) 34%,rgba(15,16,17,.2) 62%,rgba(15,16,17,.45) 100%),linear-gradient(180deg,rgba(15,16,17,.4) 0%,rgba(15,16,17,0) 30%,rgba(15,16,17,0) 70%,var(--canvas) 100%)}