/* Truewright Studio — shared styles for service pages.
   Layout: dark editorial pages; fixed header; long-form content on a 12-col grid with an 18% indent. */
:root{
  --ink:#0B0B0B;--ink-2:#151514;--line:#2A2927;--paper:#EDEBE6;--soft:#CFCCC5;--mute:#8C8A85;
  --rust:#9C3D22;--ember:#E0693F;
  --f-brand:'Outfit','Helvetica Neue',Arial,sans-serif;
  --f-display:'Instrument Serif','Times New Roman',Georgia,serif;
  --f-body:'Host Grotesk','Helvetica Neue',Arial,sans-serif;
  --gutter-l:max(16px, env(safe-area-inset-left, 0px), 3vw);
  --gutter-r:max(16px, env(safe-area-inset-right, 0px), 3vw);
  --ease:cubic-bezier(.16,.84,.2,1);
  color-scheme:dark;
}
html{box-sizing:border-box;background:var(--ink);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--ink)}
img{max-width:100%}
a{color:inherit}
a:hover{color:var(--ember)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px}
.skip:focus{left:16px}
.wrap{padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.indent{margin-left:18%}

/* header */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:80;background:rgba(11,11,11,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.logo svg{width:50px;height:50px;flex:none}
.wm{display:flex;flex-direction:column;gap:5px;line-height:1;font-family:var(--f-brand)}
.wm b{font-size:21px;font-weight:600;letter-spacing:.16em}
.wm span{font-size:10.5px;letter-spacing:.62em;color:#A9A69F}
.ring{transform-origin:50% 50%;animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{display:flex;align-items:center;gap:30px;font-size:14px}
.nav a{text-decoration:none;padding:10px 0}
.nav a[aria-current="page"]{color:var(--ember)}
.cta{border:1px solid var(--paper);padding:10px 18px !important;border-radius:999px;transition:background .3s,color .3s}
.cta:hover{background:var(--paper);color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--paper);font:500 14px var(--f-body);padding:11px 16px;border-radius:999px;cursor:pointer;min-height:44px}
.overlay{position:fixed;inset:0;z-index:70;background:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(110px + env(safe-area-inset-top,0px));padding-bottom:max(32px, env(safe-area-inset-bottom,0px));transform:translateY(-100%);transition:transform .7s var(--ease);visibility:hidden}
.overlay.open{transform:none;visibility:visible}
.overlay nav{display:flex;flex-direction:column;gap:4px}
.overlay nav a{font-family:var(--f-display);font-size:clamp(48px,13vw,92px);line-height:1.04;text-decoration:none;letter-spacing:-.03em}

/* page hero */
main{padding-top:calc(96px + env(safe-area-inset-top,0px))}
.crumbs{padding-block:28px 0;font-size:13px;color:var(--mute)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:#55534F}
.crumbs a{text-decoration:none}
.p-hero{padding-block:clamp(56px,8vw,120px) clamp(72px,9vw,140px);border-bottom:1px solid var(--line)}
.p-hero h1{margin:18px 0 0;font-family:var(--f-display);font-weight:400;font-size:clamp(52px,9vw,148px);line-height:.9;letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
.p-hero h1 em{color:var(--ember)}
.p-intro{margin:clamp(32px,4vw,48px) 0 0;display:flex;flex-wrap:wrap;gap:28px 64px;align-items:flex-end;justify-content:space-between}
.p-intro p{margin:0;flex:1 1 420px;min-width:0;max-width:56ch;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{min-height:50px;padding:13px 26px;border-radius:999px;border:1px solid var(--paper);background:none;color:var(--paper);font:500 16px var(--f-body);text-decoration:none;display:inline-flex;align-items:center;transition:background .3s,color .3s,border-color .3s}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.solid{background:var(--paper);color:var(--ink)}
.btn.solid:hover{background:var(--ember);border-color:var(--ember);color:var(--ink)}

/* content sections */
.sec{padding-block:clamp(80px,10vw,150px);border-bottom:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.sec-head .label{grid-column:1/span 3;padding-top:12px}
.sec-head h2{grid-column:4/-1;margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(36px,4.6vw,72px);line-height:.98;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.sec-body{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.prose{grid-column:4/span 7;min-width:0}
.prose p{margin:0 0 1.1em;color:var(--soft);max-width:66ch}
.prose strong{color:var(--paper);font-weight:500}
.cards{grid-column:4/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:36px 28px}
.card{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card h3{margin:0;font-weight:500;font-size:20px;letter-spacing:-.015em}
.card p{margin:0;color:var(--soft);font-size:16px}
.steps{grid-column:4/-1;list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px 24px;padding:26px 0;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);font-family:var(--f-display);font-size:44px;line-height:1;color:var(--ember);grid-row:span 2}
.steps h3{margin:0;font-weight:500;font-size:21px}
.steps p{margin:0;color:var(--soft);max-width:60ch}
.table-wrap{grid-column:4/-1;overflow-x:auto;min-width:0}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
th,td{text-align:left;padding:18px 16px 18px 0;border-top:1px solid var(--line);vertical-align:top}
thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:400;border-top:none}
td{color:var(--soft)}
td:first-child{color:var(--paper);font-weight:500}
.note{grid-column:4/-1;margin:0;font-size:14px;color:var(--mute);max-width:70ch}
.faq-list{grid-column:4/-1;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px 0;font-size:clamp(18px,1.6vw,21px)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-family:var(--f-display);font-size:30px;line-height:1;color:var(--ember);transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin:0;padding:0 0 24px;color:var(--soft);max-width:66ch}

/* closing CTA */
.close{padding-block:clamp(100px,12vw,180px)}
.close h2{margin:0;font-family:var(--f-display);font-weight:400;font-size:clamp(48px,8vw,128px);line-height:.92;letter-spacing:-.035em;max-width:14ch}
.close h2 em{color:var(--ember)}
.close p{margin:28px 0 36px;max-width:52ch;color:var(--soft);font-size:19px}
.related{margin-top:56px;font-size:15px;color:var(--mute)}
.related a{color:var(--paper);text-underline-offset:5px}

/* footer */
.foot-nav{display:flex;flex-wrap:wrap;gap:40px 72px;padding-block:56px 40px;border-top:1px solid var(--line);font-size:15px}
.foot-nav div{display:flex;flex-direction:column;gap:10px}
.foot-nav a{text-decoration:none;color:var(--soft)}
.foot-nav a:hover{color:var(--ember)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:22px max(26px, env(safe-area-inset-bottom,0px));font-size:12.5px;color:var(--mute);border-top:1px solid var(--line)}

@media (max-width:900px){
  .indent{margin-left:8%}
  .sec-head .label,.sec-head h2,.prose,.cards,.steps,.table-wrap,.note,.faq-list{grid-column:1/-1}
}
@media (max-width:760px){
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .logo svg{width:42px;height:42px}
  .wm b{font-size:17px}
  .wm span{font-size:9px}
  .indent{margin-left:0}
  main{padding-top:calc(78px + env(safe-area-inset-top,0px))}
  .steps li{grid-template-columns:48px minmax(0,1fr)}
  .steps li::before{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}