/* ===== Aarna Roots — Web Design System ===== */

@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Fraunces';src:url('../fonts/fraunces-latin-900-normal.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --ink:#15130F;
  --bone:#F7F3EA;
  --bone2:#EFE7D6;
  --rust:#914327;
  --rust2:#DA9881;
  --peach:#F1B9A5;
  --line: rgba(21,19,15,0.13);
  --line-dark: rgba(247,243,234,0.2);
  --maxw: 1180px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Archivo',sans-serif;
  color:var(--ink);
  background:var(--bone);
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-0.01em;line-height:1.08;}
.eyebrow{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--rust);
}
.italic-serif{font-family:'Fraunces',serif;font-style:italic;font-weight:500;}

/* ===== Nav ===== */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(247,243,234,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-brand{display:flex;align-items:center;gap:10px;}
.nav-brand img{height:30px;width:auto;}
.nav-brand span{font-family:'Fraunces',serif;font-size:19px;font-weight:500;color:var(--ink);}
.nav-links{display:flex;align-items:center;gap:36px;}
.nav-links a{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:14.5px;
  color:var(--ink);opacity:0.75;transition:opacity .2s;
}
.nav-links a:hover, .nav-links a.active{opacity:1;color:var(--rust);}
.nav-cta{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
  background:var(--ink);color:var(--bone)!important;
  padding:10px 20px;border-radius:30px;opacity:1!important;
  transition:background .2s;
}
.nav-cta:hover{background:var(--rust);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;
  padding:14px 28px;border-radius:30px;border:1.5px solid var(--ink);
  transition:all .25s;cursor:pointer;
}
.btn-dark{background:var(--ink);color:var(--bone);border-color:var(--ink);}
.btn-dark:hover{background:var(--rust);border-color:var(--rust);}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--bone);}
.page-dark .btn-outline{color:var(--bone);border-color:var(--line-dark);}
.page-dark .btn-outline:hover{background:var(--bone);color:var(--ink);}
.btn-light{background:var(--bone);color:var(--ink);border-color:var(--bone);}
.btn-light:hover{background:var(--rust2);border-color:var(--rust2);}

/* ===== Sections ===== */
section{padding:110px 0;position:relative;overflow:hidden;}
section.tight{padding:80px 0;}
.dark{background:var(--ink);color:var(--bone);}
.dark h1,.dark h2,.dark h3{color:var(--bone);}
.deep{background:var(--bone2);}
.rule{height:1px;background:var(--line);width:100%;}
.dark .rule{background:var(--line-dark);}

.eyebrow-dark{color:var(--rust2);}

/* ===== Hero ===== */
.hero{
  min-height:88vh;display:flex;align-items:flex-end;
  position:relative;color:var(--bone);
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,19,15,0.55) 0%, rgba(21,19,15,0.75) 55%, rgba(21,19,15,0.94) 100%);
}
.hero-content{position:relative;z-index:1;padding-bottom:80px;width:100%;}
.hero h1{font-size:clamp(38px,6vw,74px);max-width:820px;color:var(--bone);}
.hero .tagline{font-size:clamp(18px,2.2vw,26px);color:var(--rust2);margin-top:18px;max-width:640px;}
.hero-page{min-height:52vh;}

/* ===== Grid utilities ===== */
.grid{display:grid;gap:32px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.g5{grid-template-columns:repeat(5,1fr);}
.g6{grid-template-columns:repeat(6,1fr);}
.g12{grid-template-columns:repeat(12,1fr);}

.two-col{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;}
.two-col.rev{grid-template-columns:0.9fr 1.1fr;}
.two-col.rev .two-col-img{order:2;}

.img-frame{border-radius:4px;overflow:hidden;}
.img-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.img-sq{aspect-ratio:1/1;}
.img-land{aspect-ratio:4/3;}
.img-wide{aspect-ratio:16/9;}

/* ===== Text elements ===== */
.lead{font-size:19px;color:rgba(21,19,15,0.82);max-width:640px;line-height:1.65;}
.dark .lead{color:rgba(247,243,234,0.85);}
.dot-list{list-style:none;}
.dot-list li{position:relative;padding-left:20px;margin-bottom:12px;font-size:16px;line-height:1.55;}
.dot-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--rust);}
.dark .dot-list li::before{background:var(--rust2);}

.label{font-family:'Archivo',sans-serif;font-weight:700;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;color:var(--rust);margin-bottom:14px;display:block;}
.dark .label{color:var(--rust2);}

/* ===== Contact form ===== */
#contact-form input:focus,#contact-form textarea:focus{
  outline:3px solid rgba(145,67,39,0.13);border-color:var(--rust)!important;
}
#contact-submit:disabled{opacity:.62;cursor:wait;}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden;}
.contact-status{display:none;font-size:14px;line-height:1.55;padding:12px 14px;border-radius:6px;}
.contact-status.success{display:block;background:#E5EFE5;color:#285A34;border:1px solid #B8D5BC;}
.contact-status.error{display:block;background:#F6E5E1;color:#842E27;border:1px solid #E7B7AF;}

/* ===== Cards ===== */
.card{border-top:2px solid var(--rust2);padding-top:18px;}
.card .num{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;color:var(--rust);}
.dark .card .num{color:var(--rust2);}
.card h3{font-size:20px;margin:8px 0 10px;}
.card p{font-size:15px;color:rgba(21,19,15,0.72);}
.dark .card p{color:rgba(247,243,234,0.72);}

.tag{
  display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:13px;
  color:var(--rust);border:1px solid var(--rust);border-radius:20px;padding:6px 14px;margin:0 8px 8px 0;
}

/* ===== Stat strip ===== */
.stat{text-align:left;}
.stat .n{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;color:var(--rust);line-height:1;}
.dark .stat .n{color:var(--rust2);}
.stat .l{font-size:14px;color:rgba(21,19,15,0.6);margin-top:6px;}
.dark .stat .l{color:rgba(247,243,234,0.65);}

/* ===== Pull quote ===== */
.pull{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;
  font-size:clamp(22px,3vw,32px);line-height:1.35;max-width:820px;
}
.quote-mark{font-family:'Fraunces',serif;font-size:80px;color:var(--rust2);opacity:0.5;line-height:0.5;margin-bottom:8px;}

/* ===== Step track ===== */
.step-track{position:relative;display:flex;justify-content:space-between;padding-top:30px;margin-top:20px;}
.step-track::before{content:'';position:absolute;top:30px;left:0;right:0;height:1.5px;background:var(--rust2);}
.step-node{position:relative;flex:1;text-align:center;padding:0 8px;}
.step-node .num{
  width:34px;height:34px;border-radius:50%;background:var(--bone);border:2px solid var(--rust);
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:600;font-size:14px;color:var(--rust);
  margin:-17px auto 12px;
}
.dark .step-node .num{background:var(--ink);}
.step-node .lab{font-family:'Archivo';font-weight:600;font-size:14px;}

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:rgba(247,243,234,0.75);padding:70px 0 30px;}
.site-footer h4{color:var(--bone);font-size:15px;font-family:'Archivo';font-weight:700;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:16px;}
.site-footer a{color:rgba(247,243,234,0.75);}
.site-footer a:hover{color:var(--rust2);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;}
.footer-bottom{border-top:1px solid var(--line-dark);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(247,243,234,0.5);}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-brand img{height:32px;}
.footer-brand span{font-family:'Fraunces';font-size:20px;color:var(--bone);}

/* ===== Scroll reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ===== Diagnostic Quiz ===== */
.quiz-shell{max-width:760px;margin:0 auto;}
.quiz-progress{display:flex;gap:8px;margin-bottom:40px;}
.quiz-progress .seg{flex:1;height:3px;background:var(--line);border-radius:3px;overflow:hidden;}
.quiz-progress .seg .fill{height:100%;width:0%;background:var(--rust);transition:width .4s ease;}
.quiz-step{display:none;}
.quiz-step.active{display:block;animation:fadeIn .4s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.quiz-q{font-family:'Fraunces',serif;font-size:clamp(22px,3vw,30px);margin-bottom:8px;}
.quiz-sub{color:rgba(21,19,15,0.6);font-size:15px;margin-bottom:28px;}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.quiz-opt{
  border:1.5px solid var(--line);border-radius:8px;padding:18px 20px;cursor:pointer;
  font-family:'Archivo';font-weight:600;font-size:15.5px;transition:all .2s;
  background:var(--bone);
}
.quiz-opt:hover{border-color:var(--rust2);background:var(--bone2);}
.quiz-opt.selected{border-color:var(--rust);background:var(--rust);color:var(--bone);}
.quiz-nav{display:flex;justify-content:space-between;margin-top:36px;}
.quiz-nav .btn:disabled{opacity:0.35;cursor:not-allowed;pointer-events:none;}
.quiz-email{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:6px;font-family:'Archivo';font-size:15px;background:var(--bone);margin-bottom:16px;}

.result-card{border:1.5px solid var(--line);border-radius:10px;padding:28px;background:var(--bone);}
.result-card .k{font-family:'Space Grotesk';font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--rust);margin-bottom:10px;}
.result-card .v{font-family:'Fraunces';font-size:21px;margin-bottom:6px;}
.result-card p{font-size:14.5px;color:rgba(21,19,15,0.68);}
.disclaimer{font-size:13px;color:rgba(21,19,15,0.5);border-top:1px solid var(--line);padding-top:18px;margin-top:24px;}

/* ===== Resource Vault ===== */
.gate-overlay{
  border:1.5px dashed var(--rust2);border-radius:12px;padding:48px;text-align:center;
  background:var(--bone2);max-width:560px;margin:0 auto;
}
.doc-list{display:grid;gap:20px;margin-top:8px;}
.doc-card{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border:1.5px solid var(--line);border-radius:8px;padding:22px 26px;background:var(--bone);
}
.doc-card .doc-title{font-family:'Fraunces';font-size:18px;margin-bottom:4px;}
.doc-card .doc-desc{font-size:14px;color:rgba(21,19,15,0.62);}
.draft-tag{
  display:inline-block;font-family:'Space Grotesk';font-size:11px;font-weight:600;letter-spacing:0.04em;
  color:#946200;background:#F6E8C8;border-radius:20px;padding:3px 10px;margin-top:6px;
}
#doc-vault{display:none;}

@media (max-width: 900px){
  .quiz-options{grid-template-columns:1fr;}
  .doc-card{flex-direction:column;align-items:flex-start;}
}

/* ===== FAQ Accordion ===== */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:26px 0;cursor:pointer;font-family:'Fraunces';font-size:19px;
}
.faq-q .plus{font-family:'Space Grotesk';font-size:22px;color:var(--rust);flex-shrink:0;transition:transform .25s;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a-inner{padding-bottom:24px;font-size:15.5px;color:rgba(21,19,15,0.72);max-width:760px;line-height:1.6;}

/* ===== Sustainability commitment grid ===== */
.commit-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.dark .commit-row{border-bottom:1px solid var(--line-dark);}
.commit-row .mark{color:var(--rust);font-family:'Space Grotesk';font-weight:700;flex-shrink:0;}
.dark .commit-row .mark{color:var(--rust2);}

/* ===== Diagnostic sliders ===== */
.slider-wrap{padding:20px 4px;}
.quiz-slider{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:4px;
  background:var(--line); outline:none; margin:10px 0 4px;
}
.quiz-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%;
  background:var(--rust); cursor:pointer; border:4px solid var(--bone); box-shadow:0 0 0 1.5px var(--rust);
}
.quiz-slider::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--rust); cursor:pointer;
  border:4px solid var(--bone); box-shadow:0 0 0 1.5px var(--rust);
}
.slider-ticks{display:flex;justify-content:space-between;font-family:'Space Grotesk';font-size:12.5px;color:rgba(21,19,15,0.5);margin-bottom:18px;}
.slider-readout{
  font-family:'Fraunces';font-size:20px;color:var(--rust);background:var(--bone2);
  border-radius:8px;padding:14px 20px;text-align:center;transition:all .2s;
}

/* ===== Reasoning trace ===== */
.trace-list{max-width:420px;margin:0 auto;}
.trace-step{
  display:flex;align-items:center;gap:14px;padding:11px 0;font-family:'Archivo';font-size:15px;
  color:rgba(21,19,15,0.32);transition:color .3s;
}
.trace-step.active{color:var(--ink);font-weight:600;}
.trace-step.done{color:rgba(21,19,15,0.55);}
.trace-dot{
  width:9px;height:9px;border-radius:50%;background:var(--line);flex-shrink:0;transition:all .3s;
}
.trace-step.active .trace-dot{background:var(--rust);box-shadow:0 0 0 4px rgba(145,67,39,0.15);}
.trace-step.done .trace-dot{background:var(--rust2);}

/* ===== Ask Aarna widget ===== */
#ask-aarna-toggle{
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:56px; height:56px; border-radius:50%; background:var(--ink); border:none; cursor:pointer;
  box-shadow:0 6px 20px rgba(21,19,15,0.3); transition:transform .2s;
  display:flex; align-items:center; justify-content:center;
}
#ask-aarna-toggle:hover{ transform:scale(1.06); background:var(--rust); }
#ask-aarna-toggle .aa-icon{ font-family:'Fraunces'; font-style:italic; font-size:22px; color:var(--bone); }

#ask-aarna-panel{
  position:fixed; bottom:92px; right:24px; z-index:999; width:360px; max-width:88vw;
  background:var(--bone); border-radius:14px; box-shadow:0 12px 40px rgba(21,19,15,0.25);
  border:1px solid var(--line); overflow:hidden;
  opacity:0; transform:translateY(16px) scale(0.98); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
#ask-aarna-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.aa-header{
  background:var(--ink); color:var(--bone); padding:16px 18px; display:flex; justify-content:space-between; align-items:flex-start;
}
.aa-title{ font-family:'Fraunces'; font-size:17px; }
.aa-sub{ font-family:'Archivo'; font-size:11.5px; color:rgba(247,243,234,0.65); margin-top:3px; }
#ask-aarna-close{ background:none; border:none; color:var(--bone); font-size:20px; cursor:pointer; line-height:1; padding:0 2px; }

.aa-body{ padding:16px; max-height:60vh; overflow-y:auto; }
#ask-aarna-input{
  width:100%; padding:11px 14px; border:1.5px solid var(--line); border-radius:8px;
  font-family:'Archivo'; font-size:14.5px; background:#fff; margin-bottom:12px;
}
.aa-hint{ font-size:12.5px; color:rgba(21,19,15,0.5); padding:4px 2px; }
.aa-no-match{ font-size:13.5px; color:rgba(21,19,15,0.65); line-height:1.5; padding:6px 2px; }
.aa-no-match a{ color:var(--rust); font-weight:600; }
.aa-result{ border-top:1px solid var(--line); padding:12px 2px; }
.aa-result:first-child{ border-top:none; }
.aa-q{ font-family:'Fraunces'; font-size:14.5px; margin-bottom:5px; }
.aa-a{ font-size:13px; color:rgba(21,19,15,0.72); line-height:1.5; margin-bottom:6px; }
.aa-link{ font-size:12px; font-weight:600; color:var(--rust); }

@media (max-width: 900px){
  #ask-aarna-panel{ right:12px; bottom:88px; }
  #ask-aarna-toggle{ right:16px; bottom:16px; }
}

/* ===== Interactive Hub Explorer ===== */
.hub-explorer{ display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:stretch; }
.hub-nodes{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.hub-node{
  background:var(--bone); border:1.5px solid var(--line); border-radius:10px; padding:16px 14px;
  text-align:left; cursor:pointer; transition:all .25s; display:flex; flex-direction:column; gap:6px;
}
.hub-node:hover{ border-color:var(--rust2); }
.hub-node.active{ background:var(--rust); border-color:var(--rust); }
.hub-node-name{ font-family:'Fraunces'; font-size:14.5px; color:var(--ink); line-height:1.25; }
.hub-node.active .hub-node-name{ color:var(--bone); }
.hub-node-tag{ font-family:'Space Grotesk'; font-size:10.5px; color:rgba(21,19,15,0.5); letter-spacing:0.02em; }
.hub-node.active .hub-node-tag{ color:rgba(247,243,234,0.75); }

.hub-detail{ position:relative; background:var(--bone); border-radius:10px; padding:28px; border:1.5px solid var(--line); }
.hub-detail-panel{ display:none; animation:fadeIn .35s ease; }
.hub-detail-panel.active{ display:block; }
.hub-detail-panel h3{ font-size:20px; margin:8px 0 14px; }
.hub-detail-panel p{ font-size:14.5px; color:rgba(21,19,15,0.72); line-height:1.6; margin-bottom:18px; }
.hub-chips{ display:flex; flex-wrap:wrap; gap:8px; }

@media (max-width: 900px){
  .hub-explorer{ grid-template-columns:1fr; }
  .hub-nodes{ grid-template-columns:1fr 1fr; }
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
  .two-col, .two-col.rev{grid-template-columns:1fr;gap:32px;}
  .two-col.rev .two-col-img{order:0;}
  .g2,.g3,.g4,.g5,.g6{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  section{padding:70px 0;}
  .step-track{flex-wrap:wrap;}
}