/* Base */
:root{
  --bg:#0b0b0b; --fg:#ececec; --muted:#a9a9a9; --line:#232323; --card:#151515;
  --ink:#ffffff; --accent:#B56A3C; --focus:#6ea8fe;
  --radius:16px; --rsm:12px; --gap:18px; --max:1080px;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --fg:#111; --muted:#606060; --line:#e7e7e7; --card:#f7f7f7; --ink:#111; --accent:#B56A3C; --focus:#0b57d0; }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.6 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor}
a:hover{opacity:.85}
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:12px; top:12px; width:auto; height:auto; background:var(--ink); color:var(--bg); padding:6px 10px; border-radius:8px}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Layout helpers */
.wrap{max-width:var(--max); margin:0 auto; padding:28px 20px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px}
.btn{appearance:none; border:1px solid var(--line); background:transparent; color:var(--fg);
     padding:12px 16px; border-radius:999px; cursor:pointer; transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.btn-small{padding:8px 12px; font-size:14px}
.muted{color:var(--muted)}

/* Header */
.header-grid{display:grid; grid-template-columns:auto 1fr; align-items:center; gap:16px}
.brand{display:flex; align-items:center; gap:10px}
.logo-mark{color:var(--accent); font-size:16px; line-height:1}
.brand-typography{display:flex; flex-direction:column; line-height:1}
.brand-main{
  font-family:"Ivy Journal Thin","Ivy Journal","Times New Roman",Times,serif;
  font-style:normal; font-weight:300;
  font-size:72px; /* 54pt approx */
  letter-spacing:.02em; color:var(--accent); transform:translateY(2px);
}
.brand-sub{
  font-family:"Ivy Journal Thin Italic","Ivy Journal","Times New Roman",Times,serif;
  font-style:italic; font-weight:300; font-size:24px; /* 18pt approx */
  letter-spacing:.08em; color:color-mix(in srgb, var(--accent) 85%, var(--fg));
}
.nav-toggle{
  display:none; margin-right:6px; font:inherit; line-height:1; padding:8px 10px; border-radius:8px;
  background:transparent; border:1px solid var(--line); color:var(--fg); cursor:pointer;
}
.top-nav{display:flex; align-items:center; gap:16px; justify-self:end; flex-wrap:wrap}
.top-nav a{border-bottom:none}

@media(max-width:900px){
  .nav-toggle{display:inline-block}
  .top-nav{
    position:absolute; top:64px; right:20px; background:var(--card); border:1px solid var(--line);
    border-radius:12px; padding:12px; display:none; flex-direction:column; gap:10px; z-index:20;
  }
  .top-nav.open{display:flex}
}

/* Hero */
.hero-centered{text-align:center}
.hero-wrap{display:grid; gap:18px; place-items:center}
h1{margin:.2rem 0 0; font-size:clamp(30px,6vw,50px); line-height:1.1; letter-spacing:-.02em}
.lead{font-size:clamp(15px,2.1vw,18px)}
.underline{background:linear-gradient(120deg, color-mix(in srgb, var(--ink) 25%, transparent), transparent);
           padding:0 .15em; border-radius:6px}
.cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}

/* Selector */
.selector .card-selector{display:grid; gap:14px}
.selector-head h2{margin:0}
.sentence{
  font-size:clamp(18px,2.6vw,22px); line-height:1.5; letter-spacing:-.01em;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; flex-wrap:wrap; gap:8px 10px;
}
.select{position:relative; display:inline-flex; align-items:center; min-width:160px; border-bottom:1px solid color-mix(in srgb, var(--ink) 60%, transparent); padding:0 0 2px; cursor:pointer}
.select select{appearance:none; border:none; background:transparent; color:var(--fg); font:inherit; padding-right:20px; outline:none}
.select:after{content:"▾"; position:absolute; right:0; bottom:2px; font-size:.9em; color:var(--muted); pointer-events:none}
.selector-actions{display:flex; gap:10px; flex-wrap:wrap}
.result{border:1px dashed var(--line); border-radius:var(--rsm); padding:16px; margin-top:14px}
.result-cta{margin-top:10px}

/* Sectors */
.sectors .sector-grid{display:grid; gap:12px; grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .sectors .sector-grid{grid-template-columns:1fr} }
.sector{position:relative; overflow:hidden}
.sector .mini{margin:.1rem 0 .2rem; color:var(--muted); transition:opacity .18s ease}
.sector .reveal{
  position:relative; margin-top:8px; padding:10px; border-radius:12px;
  background:var(--card); /* solid backdrop to cover text */
  color:var(--fg); border:1px dashed var(--line);
}
@media(min-width:901px){
  .sector .reveal{
    position:absolute; inset:auto 12px 12px 12px; opacity:0; transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease;
  }
  .sector:hover .reveal{opacity:1; transform:translateY(0)}
  .sector:hover .mini{opacity:0}
}

/* Services */
.section-head h2{margin:0 0 .4rem}
.service-grid{display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .service-grid{grid-template-columns:1fr} }
.svc h3{margin:.2rem 0 .3rem}
.svc ul{margin:.4rem 0 0; padding-left:1.1rem; color:var(--muted)}
@media(max-width:900px){ .svc ul{display:none} }

/* FAQ */
.grid-faq{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media(max-width:900px){ .grid-faq{grid-template-columns:1fr} }
details{background:transparent}
summary{cursor:pointer; font-weight:600}

/* Footer */
.site-footer{border-top:1px solid var(--line); margin-top:20px}
.footer-grid{display:grid; gap:20px; grid-template-columns:1fr 1fr 2fr; align-items:start}
@media(max-width:900px){ .footer-grid{grid-template-columns:1fr} }
.f-brand .chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--line); border-radius:999px; text-decoration:none}
.f-nav a{display:block; margin:.2rem 0; border-bottom:none}
.f-contact{justify-self:end}
@media(max-width:900px){ .f-contact{justify-self:stretch} }
.footnote{border-top:1px solid var(--line); padding:14px 20px; color:var(--muted); font-size:14px}

/* Small polish */
@media (prefers-reduced-motion: reduce){ .btn{transition:none} }