:root{
  --ink:#0D0D0D; --ink-2:#1C1C1C; --paper:#F5F2EA; --paper-2:#EDE8DB;
  --teal:#E5780D; --teal-d:#B8600A; --amber:#F2A65E; --slate:#5A6577; --white:#FFFFFF;
  --text:#1A1A1A; --text-soft:#4B5568; --line:rgba(13,13,13,.12);
  --radius:2px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#0D0D0D; --paper-2:#161616; --text:#F1EFE6; --text-soft:#B7BFCE; --line:rgba(245,242,234,.14); }
}
:root[data-theme="dark"]{ --paper:#0D0D0D; --paper-2:#161616; --text:#F1EFE6; --text-soft:#B7BFCE; --line:rgba(245,242,234,.14); }
html{scroll-behavior:smooth; scroll-padding-top:calc(78px + env(safe-area-inset-top,0px));}
*,*::before,*::after{box-sizing:inherit;}
body{margin:0; background:var(--paper); color:var(--text); font-family:'Manrope',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; line-height:1.14; margin:0 0 .5em; color:var(--text);}
h1{font-size:clamp(2.2rem,5.6vw,3.8rem); font-weight:500;}
h2{font-size:clamp(1.7rem,3.8vw,2.4rem);}
h3{font-size:1.12rem; font-weight:600;}
p{margin:0 0 1em; color:var(--text-soft); max-width:62ch;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* Header */
header.site{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--paper) 88%, transparent); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1180px; margin:0 auto; position:relative;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none;}
.logo span{font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; letter-spacing:.2px;}
nav.links{display:flex; gap:26px; font-size:.94rem;}
nav.links a{text-decoration:none; color:var(--text-soft); transition:color .2s;}
nav.links a:hover,nav.links a[aria-current]{color:var(--teal);}
.nav-cta{display:flex; gap:10px; align-items:center;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 24px; border-radius:999px; font-weight:600; font-size:.92rem; text-decoration:none; border:1px solid transparent; transition:transform .18s ease, background .2s; cursor:pointer;}
.btn:hover{transform:translateY(-1px);}
.btn-solid{background:var(--teal); color:#fff; position:relative; overflow:hidden;}
.btn-solid:hover{background:var(--teal-d);}
.btn-solid::after{content:'';position:absolute; inset:0; background:rgba(255,255,255,.22); transform:translateX(-120%) skewX(-15deg); transition:transform .5s ease;}
.btn-solid:hover::after{transform:translateX(120%) skewX(-15deg);}
.btn-line{border-color:var(--line); color:var(--text); background:none; font-family:inherit;}

/* Mobile nav */
.hamburger{display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; cursor:pointer;}
.hamburger span{width:22px; height:2px; background:var(--text); transition:transform .25s ease, opacity .25s ease;}
.mobile-panel{position:fixed; inset:0; top:0; background:var(--ink); color:#F1EFE6; z-index:60; display:flex; flex-direction:column; padding:24px; transform:translateY(-100%); transition:transform .32s ease; padding-top:calc(24px + env(safe-area-inset-top,0px));}
.mobile-panel.open{transform:translateY(0);}
.mobile-panel .close-row{display:flex; justify-content:flex-end;}
.mobile-panel .close-row button{background:none; border:0; color:#fff; font-size:1.6rem; line-height:1; padding:8px; cursor:pointer;}
.mobile-panel nav{display:flex; flex-direction:column; gap:22px; margin-top:20px; font-family:'Fraunces',serif; font-size:1.5rem;}
.mobile-panel nav a{text-decoration:none; color:#fff;}
.mobile-panel .m-cta{margin-top:auto; display:flex; flex-direction:column; gap:12px;}

/* Hero (generic, dark) */
.hero{position:relative; overflow:hidden; background:var(--ink); color:#F1EFE6; padding:88px 0 78px;}
.hero .bg{position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(1100px 550px at 12% -10%, rgba(27,127,114,.65), transparent 60%),
    radial-gradient(900px 550px at 100% 10%, rgba(212,162,76,.38), transparent 60%),
    linear-gradient(160deg,#0D0D0D 0%,#1C1C1C 55%,#0D0D0D 100%);
  background-size:260% 260%,260% 260%,100% 100%;
  animation:driftBg 11s ease-in-out infinite alternate;
}
@keyframes driftBg{0%{background-position:0% 10%,100% 0%,0 0;}100%{background-position:75% 85%,10% 90%,0 0;}}
.hero .orb{position:absolute; z-index:0; border-radius:50%; filter:blur(2px); pointer-events:none;}
.orb1{width:10px; height:10px; background:var(--amber); top:22%; left:8%; animation:float1 7s ease-in-out infinite;}
.orb2{width:6px; height:6px; background:#5FD3C4; top:60%; left:42%; animation:float2 9s ease-in-out infinite;}
.orb3{width:8px; height:8px; background:var(--amber); top:35%; left:88%; animation:float1 8s ease-in-out infinite reverse;}
.orb4{width:5px; height:5px; background:#5FD3C4; top:78%; left:70%; animation:float2 6.5s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translate(0,0);}50%{transform:translate(18px,-26px);}}
@keyframes float2{0%,100%{transform:translate(0,0);}50%{transform:translate(-22px,18px);}}
.hero-inner{position:relative; z-index:1;}
.breadcrumb{position:relative; z-index:1; font-size:.85rem; color:#98A2B5; margin-bottom:18px;}
.breadcrumb a{color:#98A2B5; text-decoration:none;}
.breadcrumb a:hover{color:var(--amber);}
.eyebrow-plain{color:var(--amber); font-size:.95rem; font-weight:600; margin-bottom:14px;}
.hero p.lead{color:#C7CEDB; font-size:1.1rem; max-width:56ch;}
.hero-actions{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0s);}
.reveal.in{opacity:1; transform:translateY(0);}

/* Sections */
section{padding:80px 0;}
.section-head{max-width:680px; margin-bottom:44px;}
.section-head .kicker{color:var(--teal); font-weight:700; font-size:.85rem; letter-spacing:.02em; margin-bottom:10px;}
.alt{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* Services grid (home) */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.svc-card{position:relative; background:var(--paper-2); padding:32px 26px; transition:background .25s;}
.svc-card:hover{background:var(--paper);}
.svc-card::after{content:'';position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--teal); transition:width .35s ease;}
.svc-card:hover::after{width:100%;}
.svc-mark{width:34px; height:34px; border:1.5px solid var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--teal); font-family:'Fraunces',serif; font-size:.92rem; margin-bottom:16px;}
.svc-card h3{margin-bottom:8px;}
.svc-card p{font-size:.95rem; margin-bottom:12px;}
.svc-card a.more{font-size:.88rem; font-weight:700; color:var(--teal); text-decoration:none;}
.svc-card a.more:hover{text-decoration:underline;}

/* Why / benefits list */
.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start;}
.why-list,.benefit-list{display:flex; flex-direction:column; gap:24px;}
.why-item,.benefit-item{display:flex; gap:16px;}
.why-item .n,.benefit-item .n{font-family:'Fraunces',serif; color:var(--amber); font-size:1.35rem; flex:0 0 auto; width:32px;}
.why-item h3,.benefit-item h3{margin-bottom:4px;}
.why-item p,.benefit-item p{font-size:.95rem; margin:0;}

/* Process / steps */
.dark-section{background:var(--ink); color:#F1EFE6;}
.dark-section .section-head p{color:#B7BFCE;}
.dark-section h2{color:#fff;}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.step{border-top:2px solid rgba(255,255,255,.18); padding-top:16px;}
.step .num{font-family:'Fraunces',serif; color:var(--amber); font-size:1.5rem; display:block; margin-bottom:8px;}
.step h3{color:#fff; margin-bottom:6px; font-size:1.02rem;}
.step p{color:#98A2B5; font-size:.92rem; margin:0;}

/* Checklist (what's included) */
.checklist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:14px 24px;}
.checklist li{display:flex; gap:10px; align-items:flex-start; font-size:.96rem; color:var(--text-soft);}
.checklist li svg{flex:0 0 auto; margin-top:3px;}

/* Blog */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.blog-card{border:1px solid var(--line); padding:22px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;}
.blog-thumb{width:100%; aspect-ratio:16/9; border-radius:var(--radius); background:linear-gradient(135deg,var(--teal),var(--ink)); position:relative; overflow:hidden;}
.blog-thumb svg{position:absolute; inset:0; width:100%; height:100%;}
.blog-tag{font-size:.78rem; font-weight:700; color:var(--teal);}
.blog-card h3{font-size:1.02rem; margin-bottom:2px;}
.blog-card p{font-size:.92rem; margin-bottom:0;}

/* FAQ accordion */
.faq-list{max-width:820px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{cursor:pointer; list-style:none; padding:20px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:'Fraunces',serif; font-size:1.04rem; font-weight:500;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{flex:0 0 auto; width:22px; height:22px; position:relative;}
.faq-item summary .plus::before,.faq-item summary .plus::after{content:'';position:absolute; background:var(--teal); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-item summary .plus::before{width:14px; height:2px;}
.faq-item summary .plus::after{width:2px; height:14px; transition:opacity .2s;}
.faq-item[open] summary .plus::after{opacity:0;}
.faq-item p{padding-bottom:20px; margin:0; font-size:.96rem;}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px;}
.contact-info a.big{display:flex; align-items:center; gap:12px; font-family:'Fraunces',serif; font-size:1.25rem; color:var(--text); text-decoration:none; margin-bottom:14px;}
.contact-info a.big:hover{color:var(--teal);}
.contact-note{font-size:.9rem; color:var(--text-soft);}
form.contact-form{display:grid; gap:14px;}
form.contact-form input, form.contact-form select, form.contact-form textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); background:var(--paper); color:var(--text); font:inherit; border-radius:var(--radius);
}
form.contact-form textarea{min-height:110px; resize:vertical;}
form.contact-form button{justify-self:start;}

/* Bottom CTA band */
.cta-band{background:var(--teal); color:#fff; text-align:center; padding:64px 0;}
.cta-band h2{color:#fff;}
.cta-band p{color:rgba(255,255,255,.85); margin-left:auto; margin-right:auto;}
.cta-band .hero-actions{justify-content:center;}
.cta-band .btn-line{border-color:rgba(255,255,255,.5); color:#fff;}

footer.site{border-top:1px solid var(--line); padding:40px 0 100px;}
.foot-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px;}
.foot-col h3{font-size:.85rem; text-transform:none; margin-bottom:10px;}
.foot-col a{display:block; font-size:.9rem; color:var(--text-soft); text-decoration:none; margin-bottom:8px;}
.foot-col a:hover{color:var(--teal);}
footer.site .bottom{font-size:.85rem; color:var(--text-soft); border-top:1px solid var(--line); padding-top:20px;}

/* Floating circular action buttons, bottom-right */
.sticky-actions{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:55; display:flex; flex-direction:column; gap:14px;}
.sticky-actions a{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:1.35rem; box-shadow:0 10px 24px rgba(0,0,0,.28); transition:transform .22s ease, box-shadow .22s ease;}
.sticky-actions a:hover{transform:scale(1.08) translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.32);}
.sticky-actions a.call{background:var(--ink); color:#fff;}
.sticky-actions a.wa{background:#22A05A; color:#fff;}
.sticky-actions a .lbl{display:none;}

/* Preloader */
.preloader{position:fixed; inset:0; z-index:9999; background:var(--ink); display:flex; align-items:center; justify-content:center; transition:opacity .5s ease, visibility .5s ease;}
.preloader.hide{opacity:0; visibility:hidden; pointer-events:none;}
.loader-orbit{position:relative; width:96px; height:96px; display:flex; align-items:center; justify-content:center;}
.logo-icon{width:auto; height:34px; display:block; background:#fff; border-radius:8px; padding:4px; box-shadow:0 1px 3px rgba(0,0,0,.12);}
.loader-orbit .logo-mark{width:auto; height:42px; position:relative; z-index:1; background:#fff; border-radius:10px; padding:6px;}
.loader-orbit .ring{position:absolute; inset:0; animation:orbitspin 1.5s linear infinite;}
.loader-orbit .ring::before{content:''; position:absolute; top:0; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber);}
.loader-orbit .track{position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.12);}
@keyframes orbitspin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){ .loader-orbit .ring{animation:none;} }

@media (max-width:920px){
  nav.links{display:none;}
  .hamburger{display:flex;}
  .svc-grid{grid-template-columns:1fr 1fr;}
  .why-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .blog-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .checklist{grid-template-columns:1fr;}
  body{padding-bottom:64px;}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .nav-cta .btn-line{display:none;}
}