/* AUREL DESIGN STUDIO — one simple system
   Dark charcoal, off-white type, one serif for headlines, one sans for everything else.
   Off-white cards are used only for Feasibility. */
:root{
  --bg:#0D0D0C; --card:#141413; --line:#2A2926;
  --ink:#F1EEE8; --soft:#C6C2B9; --muted:#8F8A80;
  --paper:#EFECE5; --paper-ink:#0D0D0C;
  --pad:clamp(22px,5vw,72px); --max:1320px;
  --serif:'Instrument Serif',Georgia,serif; --sans:'Inter Tight',system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme:dark; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.02; }
h1{ font-size:clamp(48px,8vw,124px); }
h2{ font-size:clamp(36px,5vw,72px); }
h1 em,h2 em{ color:var(--muted); font-style:italic; }
::selection{ background:var(--ink); color:var(--bg); }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
section{ padding:clamp(88px,12vw,180px) 0; }
.label{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.mono{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.mono b{ color:var(--ink); font-weight:500; }
.lede{ font-size:clamp(18px,1.6vw,21px); color:var(--soft); max-width:56ch; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }

/* progress hairline */
.progress{ position:fixed; left:0; top:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); background:var(--ink); z-index:60; }

/* nav */
header.site-nav{ position:sticky; top:0; z-index:50; background:rgba(13,13,12,.8); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s; }
header.site-nav.scrolled{ border-bottom-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px; }
.logo-mark{ display:flex; align-items:center; gap:14px; }
.logo-box{ border:1px solid var(--line); padding:5px 8px; background:#000; }
.logo-img{ height:26px; width:auto; }
.logo-word{ font-size:10.5px; letter-spacing:.22em; line-height:1.4; color:var(--soft); display:none; }
@media(min-width:760px){ .logo-word{ display:block; } }
nav.primary{ display:none; gap:34px; }
nav.primary a{ font-size:13.5px; color:var(--soft); position:relative; padding:6px 0; }
nav.primary a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s; }
nav.primary a:hover,nav.primary a.on{ color:var(--ink); }
nav.primary a:hover::after,nav.primary a.on::after{ transform:scaleX(1); }
@media(min-width:960px){ nav.primary{ display:flex; } }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-cta{ display:none; }
@media(min-width:760px){ .nav-cta{ display:inline-flex; } }
.menu-btn{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0 12px; background:none; border:1px solid var(--line); cursor:pointer; }
.menu-btn span{ display:block; height:1px; background:var(--ink); }
@media(min-width:960px){ .menu-btn{ display:none; } }
.mobile-menu{ display:none; flex-direction:column; border-top:1px solid var(--line); background:var(--bg); }
.mobile-menu.open{ display:flex; }
.mobile-menu a{ padding:18px var(--pad); border-bottom:1px solid var(--line); font-size:18px; }

/* buttons + links */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 26px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:500 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; transition:background .25s,color .25s; }
.btn:hover{ background:var(--ink); color:var(--bg); }
.btn-solid{ background:var(--ink); color:var(--bg); }
.btn-solid:hover{ background:#fff; border-color:#fff; }
.nav-cta{ height:42px; padding:0 18px; background:var(--ink); color:var(--bg); align-items:center; font:500 11.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.nav-cta:hover{ background:#fff; }
.cta{ display:inline-block; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:4px; }
.cta:hover{ opacity:.65; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* reveal */
.js .rv{ opacity:0; transform:translateY(22px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv.in{ opacity:1; transform:none; }

/* HERO */
.hero{ padding:clamp(56px,9vw,120px) 0 0; }
.hero h1{ margin-top:26px; max-width:13ch; }
.hero h1 .w{ display:inline-block; animation:up 1s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d); }
.hero h1 .soft{ display:block; color:var(--muted); font-style:italic; animation:up 1.1s cubic-bezier(.2,.7,.2,1) .45s both; }
@keyframes up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.hero-row{ display:grid; gap:32px; margin-top:clamp(32px,4vw,56px); align-items:end; }
@media(min-width:900px){ .hero-row{ grid-template-columns:1fr auto; gap:64px; } }
.cmp{ position:relative; margin-top:clamp(44px,6vw,88px); aspect-ratio:4/3; overflow:hidden; background:#111; user-select:none; }
@media(min-width:700px){ .cmp{ aspect-ratio:16/9; } }
@media(min-width:1100px){ .cmp{ aspect-ratio:2/1; } }
.cmp-render{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cmp-lines{ position:absolute; inset:0; background:#0D0D0C; clip-path:inset(0 50% 0 0); }
.cmp-lines img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(1.15); }
.cmp-handle{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:#fff; z-index:3; pointer-events:none; }
.cmp-handle span{ position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:#fff; color:#0D0D0C; display:grid; place-items:center; font-size:14px; letter-spacing:2px; }
.cmp-handle span::before{ content:'‹ ›'; }
.cmp-range{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; z-index:4; margin:0; }
.cmp-tag{ position:absolute; bottom:18px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; z-index:2; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.cmp-tag.l{ left:20px; } .cmp-tag.r{ right:20px; }

/* section head */
.head{ display:grid; gap:22px; margin-bottom:clamp(44px,6vw,88px); }
@media(min-width:900px){ .head{ grid-template-columns:.26fr .74fr; gap:48px; } .head .label{ padding-top:14px; } }
.head h2{ max-width:16ch; }
.head p{ margin-top:22px; }

/* FEASIBILITY (home teaser) */
.feas-card{ background:var(--paper); color:var(--paper-ink); padding:clamp(28px,4.5vw,64px); display:grid; gap:36px; }
.feas-card .label{ color:#6B675F; }
.feas-card h2{ font-size:clamp(34px,4.4vw,62px); max-width:15ch; }
.feas-card h2 em{ color:#6B675F; }
.feas-card p.lede{ color:#3A3833; margin-top:20px; }
@media(min-width:1000px){ .feas-card{ grid-template-columns:1fr 1fr; gap:80px; align-items:end; } }
.ck{ display:grid; gap:22px; }
.ck-field{ display:grid; gap:6px; }
.ck-field label{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:#6B675F; }
.ck-field input,.ck-field select{ width:100%; background:transparent; color:var(--paper-ink); border:0; border-bottom:1px solid #0D0D0C; border-radius:0; padding:10px 0 12px; font:inherit; font-size:18px; }
.ck-field select{ appearance:none; -webkit-appearance:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230D0D0C'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 4px center; }
.ck-field select option{ background:var(--paper); color:var(--paper-ink); }
.ck-field input::placeholder{ color:#8A857B; }
.ck input:focus,.ck select:focus{ outline:none; border-bottom-width:2px; }
.feas-card .btn{ border-color:#0D0D0C; background:#0D0D0C; color:var(--ink); }
.feas-card .btn:hover{ background:transparent; color:#0D0D0C; }
.feas-card .cta{ color:#0D0D0C; }
.feas-links{ display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:6px; }

/* WORK */
.work-list{ display:grid; gap:clamp(64px,8vw,128px); }
.work{ display:block; }
.work-img{ position:relative; overflow:hidden; background:#111; }
.work-img img{ width:100%; height:auto; transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
.work:hover .work-img img{ transform:scale(1.025); }
.work-img.fit{ background:#fff; }
.work-img.fit img{ max-height:76vh; width:100%; object-fit:contain; }
.work-cap{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 24px; margin-top:22px; }
.work-cap h3{ font-size:clamp(28px,3.2vw,44px); }
.work-cap .label{ transition:color .3s; }
.work:hover .work-cap .label{ color:var(--ink); }
.work-more{ margin-top:clamp(56px,7vw,96px); }

/* SOLUTIONS list */
.rows{ border-top:1px solid var(--line); }
.row{ position:relative; display:grid; gap:10px 40px; padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--line); transition:padding .45s cubic-bezier(.2,.7,.2,1); }
@media(min-width:900px){ .row{ grid-template-columns:.26fr .5fr .24fr; align-items:center; } .row:hover{ padding-left:20px; } }
.row .n{ font-size:11.5px; letter-spacing:.2em; color:var(--muted); }
.row h3{ font-size:clamp(28px,3vw,42px); }
.row .prob{ color:var(--muted); font-size:16px; margin-top:8px; transition:color .3s; }
.row:hover .prob{ color:var(--soft); }
.row .go{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
@media(min-width:900px){ .row .go{ text-align:right; } }
.row .go i{ display:inline-block; font-style:normal; transition:transform .35s; }
.row:hover .go i{ transform:translateX(8px); }
.row a.stretch::after{ content:''; position:absolute; inset:0; }
.row.now .n{ color:var(--ink); }

/* ABOUT / CONTACT */
.about{ display:grid; gap:36px; }
@media(min-width:900px){ .about{ grid-template-columns:.26fr .74fr; gap:48px; } }
.about h2{ max-width:18ch; }
.about p.lede{ margin-top:26px; }
.contact{ text-align:left; }
.contact h2{ font-size:clamp(40px,6.4vw,100px); max-width:14ch; }
.contact .actions{ margin-top:40px; }
.contact-lines{ margin-top:40px; display:flex; flex-wrap:wrap; gap:10px 32px; color:var(--soft); }
.contact-lines a{ border-bottom:1px solid var(--line); }
.contact-lines a:hover{ color:var(--ink); border-color:var(--ink); }

/* FOOTER */
footer{ border-top:1px solid var(--line); padding:clamp(56px,8vw,112px) 0 40px; }
.wordmark{ margin-bottom:clamp(36px,5vw,64px); }
.wordmark img{ height:clamp(72px,10vw,132px); width:auto; opacity:.95; }
.foot-grid{ display:grid; gap:36px; }
@media(min-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:64px; } }
.foot-name{ font-size:12px; letter-spacing:.22em; margin-bottom:12px; }
.foot-meta{ color:var(--muted); font-size:14.5px; }
footer nav{ display:flex; flex-wrap:wrap; gap:10px 28px; align-content:start; }
footer nav a{ font-size:14px; color:var(--soft); } footer nav a:hover{ color:var(--ink); }
.legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 32px; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); }
.legal a{ text-decoration:underline; text-underline-offset:4px; }

/* SOLUTION PAGES */
.sol-hero{ padding:clamp(64px,9vw,128px) 0 clamp(56px,7vw,96px); }
.sol-hero h1{ font-size:clamp(40px,6.4vw,96px); max-width:17ch; margin-top:26px; }
.sol-lede{ margin-top:30px; font-size:clamp(18px,1.6vw,21px); color:var(--soft); max-width:52ch; }
.sol-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
section.s2{ padding:0 0 clamp(64px,8vw,120px); }
.two{ display:grid; gap:24px; margin-bottom:clamp(48px,6vw,88px); }
@media(min-width:900px){ .two{ grid-template-columns:.26fr .74fr; gap:48px; } }
.two h2{ font-size:clamp(28px,3vw,40px); }
.two p{ color:var(--soft); max-width:62ch; }
.incl{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.incl li{ display:grid; grid-template-columns:48px 1fr; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); color:var(--soft); }
.incl b{ font-size:11.5px; letter-spacing:.2em; color:var(--muted); font-weight:400; padding-top:4px; }
.sol-visual{ position:relative; overflow:hidden; }
.sol-visual img{ width:100%; }
.sol-visual .cap{ display:flex; justify-content:space-between; gap:12px; padding-top:14px; }
.flow{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:clamp(40px,5vw,72px); }
@media(min-width:900px){ .flow{ grid-template-columns:repeat(4,1fr); } }
.flow > div{ background:var(--bg); padding:28px; }
.flow b{ font-size:11.5px; letter-spacing:.2em; color:var(--muted); font-weight:400; }
.flow h3{ font-size:28px; margin:14px 0 10px; }
.flow p{ color:var(--soft); font-size:15px; }
.next{ display:block; padding:clamp(40px,5vw,72px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); transition:padding .45s cubic-bezier(.2,.7,.2,1); }
.next:hover{ padding-left:20px; }
.next .nt{ font-family:var(--serif); font-size:clamp(32px,4.4vw,64px); margin-top:14px; }

/* FEASIBILITY PAGE */
.f-hero{ padding:clamp(64px,9vw,128px) 0 clamp(56px,7vw,96px); }
.f-hero h1{ font-size:clamp(44px,7vw,108px); max-width:15ch; margin-top:26px; }
.f-hero .lede{ margin-top:30px; }
.reads{ border-top:1px solid var(--line); margin:0; }
.reads > div{ display:grid; gap:4px 40px; padding:20px 0; border-bottom:1px solid var(--line); }
@media(min-width:760px){ .reads > div{ grid-template-columns:.4fr .6fr; } }
.reads dt{ font-family:var(--serif); font-size:26px; }
.reads dd{ margin:0; color:var(--soft); }
.note{ margin-top:24px; font-size:14px; color:var(--muted); max-width:66ch; }
.calc{ background:var(--paper); color:var(--paper-ink); padding:clamp(28px,4.5vw,64px); display:grid; gap:40px; }
@media(min-width:1000px){ .calc{ grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; } }
.calc .label{ color:#6B675F; }
.calc h2{ font-size:clamp(32px,3.8vw,54px); max-width:12ch; margin-top:16px; }
.calc p.s{ margin-top:18px; color:#3A3833; max-width:40ch; }
.field{ margin-bottom:26px; }
.field label{ display:flex; justify-content:space-between; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:#6B675F; }
.field output{ font-family:var(--serif); font-size:26px; letter-spacing:0; text-transform:none; color:var(--paper-ink); }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:2px; background:#0D0D0C; margin:18px 0 0; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#0D0D0C; border:0; cursor:grab; }
input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:#0D0D0C; border:0; cursor:grab; }
.meter{ position:relative; height:14px; background:rgba(0,0,0,.1); margin-top:34px; }
.meter-fill{ position:absolute; inset:0 auto 0 0; width:0; background:#0D0D0C; transition:width .5s cubic-bezier(.2,.7,.2,1), background .3s; }
.meter-fill.warn{ background:#B9955A; } .meter-fill.over{ background:#A5584A; }
.meter .mark{ position:absolute; top:-6px; bottom:-6px; width:1px; background:#0D0D0C; }
.meter .mark span{ position:absolute; top:-20px; left:-14px; font-size:10.5px; letter-spacing:.14em; color:#6B675F; }
.readout{ display:flex; align-items:baseline; gap:16px; margin-top:34px; }
.readout big{ font-family:var(--serif); font-size:clamp(64px,8vw,112px); line-height:1; letter-spacing:-.03em; }
.verdict{ margin-top:12px; color:#3A3833; min-height:3.4em; }
.disclaimer{ margin-top:18px; font-size:12.5px; color:#6B675F; }
.gap{ width:100%; border-collapse:collapse; }
.gap th{ text-align:left; font-weight:400; padding:0 16px 14px 0; }
.gap td{ padding:20px 16px 20px 0; border-top:1px solid var(--line); color:var(--soft); vertical-align:top; font-size:16px; }
.gap td:first-child{ color:var(--ink); }
.gap tr.hl td{ color:var(--ink); }
@media(max-width:760px){ .gap thead{ display:none; } .gap tr{ display:block; border-top:1px solid var(--line); padding:18px 0; } .gap td{ display:block; border:0; padding:3px 0; } }
.steps{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media(min-width:900px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.steps > div{ background:var(--bg); padding:28px; }
.steps b{ font-size:11.5px; letter-spacing:.2em; color:var(--muted); font-weight:400; }
.steps h4{ font-size:26px; margin:14px 0 10px; }
.steps p{ color:var(--soft); font-size:15px; }
.tagline{ margin-top:36px; display:flex; flex-wrap:wrap; gap:8px 22px; color:var(--muted); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.f-block{ margin-bottom:clamp(88px,11vw,160px); }
.f-block:last-child{ margin-bottom:0; }

/* image-missing fallback */
.img-missing{ min-height:240px; display:grid; place-items:center; }
.ph-label{ color:var(--muted); font-size:12px; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } .js .rv{ opacity:1; transform:none; } }