/* ==========================================================================
   PINHAN GROUP — light system
   The mark is a lattice of nodes and edges, so the page is built from the same
   parts: hairlines, nodes, and a lot of air between them.
   ========================================================================== */

/* ------------------------------- fonts ---------------------------------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(fonts/manrope-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/cinzel-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/cinzel-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ------------------------------- tokens --------------------------------- */
:root{
  --paper:#FFFFFF;
  --mist:#F4F7FA;          /* cool off-white: the airy ground, never cream */
  --ink:#16202A;           /* deep slate, chosen over a tinted black */
  --ink2:#55687A;
  --ink3:#8695A3;
  --line:#E2E9EF;
  --line2:#CBD6DF;

  --gold:#B8924F;          /* sampled from the mark */
  --gold-lt:#D9B978;
  --gold-dp:#8A6A31;
  --gold-wash:#FBF6EC;

  /* Ottoman tuğra: claret and green, kept light so the page still breathes */
  --claret:#A8202B;        /* messaging */
  --claret-2:#C94A55;
  --claret-wash:#FCEFF0;
  --green:#177A5F;         /* connectivity */
  --green-2:#3FA787;
  --green-wash:#EAF5F1;
  --sand:#FDF6EA;
  --signal:#177A5F;        /* delivered / available */
  --signal-wash:#EAF5F1;

  --disp:'Cinzel',Georgia,serif;                    /* the lockup, nothing else */
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --navh:clamp(66px,7.4vw,84px);                    /* the header overlays the band */
  --gut:clamp(20px,4.4vw,72px);                     /* side air, no hard container */
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
address{font-style:normal}   /* the office block is data, not an aside */
a{color:inherit; text-decoration:none}
::selection{background:var(--gold-lt); color:#241B08}
:focus-visible{outline:2px solid var(--gold-dp); outline-offset:3px; border-radius:4px}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
[id]{scroll-margin-top:calc(var(--navh) + 14px)}
.sect{padding:clamp(64px,9vw,132px) 0}
.sect.tint{background:var(--mist)}
.sect.cool{background:linear-gradient(180deg,var(--green-wash),rgba(255,255,255,0))}
.sect.warm{background:linear-gradient(180deg,var(--sand),rgba(255,255,255,0))}
.sect.edge{border-top:1px solid var(--line)}

/* ------------------------------ typography ------------------------------ */
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.022em; line-height:1.1}
h1{font-size:clamp(2.6rem,6.2vw,4.6rem); letter-spacing:-.032em; line-height:1.04}
h2{font-size:clamp(2rem,3.9vw,3.1rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.42rem); letter-spacing:-.012em; line-height:1.25}
p{margin:0 0 1.05em}
.lede{font-size:clamp(1.06rem,1.5vw,1.25rem); color:var(--ink2); line-height:1.6; max-width:62ch}
.muted{color:var(--ink2)}
.small{font-size:14.5px; line-height:1.55}
.tnum{font-variant-numeric:tabular-nums}
strong{font-weight:700; color:var(--ink)}

/* Section openers carry a node, not a tracked-out label: the mark's vocabulary. */
.opener{display:grid; gap:18px; max-width:74ch; margin-bottom:clamp(34px,4.6vw,58px)}
.opener h2{position:relative}
.opener h2::before{
  content:""; position:absolute; left:-26px; top:.52em; width:9px; height:9px;
  border:2px solid var(--green); border-radius:50%; background:var(--paper);
}
@media (max-width:900px){ .opener h2::before{display:none} }

/* -------------------------------- header --------------------------------
   At the very top the header floats over the coloured band and carries no
   ground of its own; a thin scrim keeps the type legible where the band is
   light. Past the first few pixels it becomes the solid white bar.          */
header{
  position:fixed; top:0; left:0; right:0; z-index:70; background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .35s, box-shadow .35s, backdrop-filter .35s;
}
header::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(8,18,14,.46) 0%, rgba(8,18,14,.28) 58%, rgba(8,18,14,0) 100%);
  transition:opacity .4s var(--ease);
}
header.stuck::before{opacity:0}
header.stuck, body.navopen header{
  background:rgba(255,255,255,.96);   /* opaque enough to stay readable while still over the band */
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line); box-shadow:0 10px 30px -22px rgba(22,32,42,.35);
}
.nav{display:flex; align-items:center; gap:clamp(14px,2.4vw,40px);
  height:var(--navh); max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}

/* The lockup as drawn on the original: the name, a rule broken by GROUP, then the
   strapline. Sizes are tuned so PINHAN is the widest line — it is what the rule
   measures itself against — with the strapline sitting just inside it. */
.lock{display:flex; align-items:center; gap:13px}
.lock img{width:clamp(44px,4.9vw,58px); height:auto; flex:0 0 auto}
.lock .bt{display:grid; line-height:1; justify-items:stretch}
.lock .bn{font-family:var(--disp); font-weight:700; font-size:clamp(17px,1.6vw,20px);
  letter-spacing:.46em; text-indent:.46em; text-align:center;
  color:var(--gold-lt); transition:color .35s}
.lock .bg{display:flex; align-items:center; gap:7px}
.lock .bg i{flex:1 1 auto; height:1px; background:var(--gold-lt); opacity:.85; transition:background .35s}
.lock .bg em{font-family:var(--disp); font-style:normal; font-weight:700;
  font-size:clamp(8px,.78vw,9.5px); letter-spacing:.34em; text-indent:.34em;
  color:var(--gold-lt); flex:0 0 auto; transition:color .35s}
.lock .bs{font-size:clamp(7px,.62vw,7.6px); letter-spacing:.10em; text-align:center;
  color:rgba(255,255,255,.88); margin-top:6px; font-weight:600; transition:color .35s}

.brand{flex:0 0 auto; margin-right:auto}
header.stuck .brand .bn, body.navopen .brand .bn{color:var(--gold-dp)}
header.stuck .brand .bg i, body.navopen .brand .bg i{background:var(--gold)}
header.stuck .brand .bg em, body.navopen .brand .bg em{color:var(--gold-dp)}
header.stuck .brand .bs, body.navopen .brand .bs{color:var(--ink3)}

.navlinks{display:flex; align-items:center; gap:clamp(12px,1.9vw,30px)}
.navlinks a{font-size:15px; font-weight:500; color:#fff; position:relative; padding:6px 0;
  transition:color .25s}
header.stuck .navlinks a, body.navopen .navlinks a{color:var(--ink2)}
.navlinks a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--gold); transition:right .3s var(--ease)}
.navlinks a:hover,.navlinks a[aria-current=page]{color:#fff}
header.stuck .navlinks a:hover, header.stuck .navlinks a[aria-current=page],
body.navopen .navlinks a:hover, body.navopen .navlinks a[aria-current=page]{color:var(--ink)}
.navlinks a::after{background:var(--gold-lt)}
header.stuck .navlinks a::after{background:var(--gold)}
.navlinks a:hover::after,.navlinks a[aria-current=page]::after{right:0}

/* the quote link is an action, not another destination — it reads as a button */
.navlinks .navcta{padding:9px 18px; border-radius:999px; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.45); color:#fff;
  font-weight:600; margin-left:6px;
  transition:background .25s, border-color .25s, color .25s, transform .25s var(--ease)}
.navlinks .navcta:hover{background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-1px)}
header.stuck .navlinks .navcta, body.navopen .navlinks .navcta{
  background:var(--ink); border-color:var(--ink); color:#fff}
header.stuck .navlinks .navcta:hover{background:#0C1319; color:#fff}
.navlinks .navcta::after{display:none}

.navend{display:flex; align-items:center; gap:10px; flex:0 0 auto; margin-left:auto}
.burger{display:none; width:42px; height:42px; border:1px solid rgba(255,255,255,.45); border-radius:10px;
  background:rgba(255,255,255,.14); position:relative; cursor:pointer;
  transition:background .3s, border-color .3s}
header.stuck .burger, body.navopen .burger{background:var(--paper); border-color:var(--line2)}
.burger i{position:absolute; left:12px; width:18px; height:1.6px; background:#fff;
  border-radius:2px; transition:top .3s var(--ease), transform .3s var(--ease), opacity .2s, background .3s}
header.stuck .burger i, body.navopen .burger i{background:var(--ink)}
.burger i:nth-child(1){top:15px} .burger i:nth-child(2){top:20px} .burger i:nth-child(3){top:25px}
body.navopen .burger i:nth-child(1){top:20px; transform:rotate(45deg)}
body.navopen .burger i:nth-child(2){opacity:0}
body.navopen .burger i:nth-child(3){top:20px; transform:rotate(-45deg)}

/* -------------------------------- buttons ------------------------------- */
.btn{display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:15px; font-weight:600;
  padding:13px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s, border-color .25s, color .25s, box-shadow .25s}
.btn.solid{background:var(--ink); color:#fff}
.btn.solid:hover{background:#0C1319; transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(22,32,42,.8)}
.btn.ghost{border-color:var(--line2); color:var(--ink); background:var(--paper)}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold-dp); transform:translateY(-2px)}
.btn.gold{background:var(--gold); color:#231A07}
.btn.gold:hover{background:var(--gold-lt); transform:translateY(-2px)}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* --------------------------------- hero --------------------------------- */
.hero{position:relative; overflow:hidden; color:#fff;
  padding-top:var(--navh); padding-bottom:clamp(58px,7vw,104px);
  background:
    radial-gradient(58% 92% at 50% 108%, rgba(217,185,120,.30) 0%, rgba(217,185,120,0) 66%),
    linear-gradient(110deg,#8E1522 0%,#A8202B 36%,#AE7F45 58%,#25906F 74%,#46B896 100%)}
/* the curve that lifts the next section into the band */
.hero::after{content:""; position:absolute; left:-2%; right:-2%; bottom:-1px; height:clamp(34px,5vw,74px);
  background:var(--paper); border-radius:50% 50% 0 0 / 100% 100% 0 0}
.hero .lede{color:rgba(255,255,255,.82)}
.hero h1 .gd{color:#F3DFB4}
.hero .eyerow{color:rgba(255,255,255,.78)}
.hero .eyerow b{color:#fff}
.hero .btn.ghost{background:transparent; border-color:rgba(255,255,255,.34); color:#fff}
.hero .btn.ghost:hover{border-color:var(--gold-lt); color:var(--gold-lt)}
.hero .btn.solid{background:#fff; color:var(--ink)}
.hero .btn.solid:hover{background:var(--gold-lt); color:#241B08}
.heroin{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  /* vertical only: the shorthand would wipe out the side gutter .wrap sets here */
  padding-top:clamp(46px,7vw,94px); padding-bottom:clamp(52px,7vw,96px)}
.eyerow{display:flex; align-items:center; gap:12px; margin-bottom:22px; color:var(--ink2); font-size:13.5px}
.eyerow b{font-weight:600; color:var(--ink)}
.eyerow .pip{width:7px; height:7px; border-radius:50%; background:var(--gold-lt); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(217,185,120,.5); animation:pip 2.8s ease-out infinite}
@keyframes pip{0%{box-shadow:0 0 0 0 rgba(217,185,120,.6)}70%{box-shadow:0 0 0 10px rgba(217,185,120,0)}100%{box-shadow:0 0 0 0 rgba(217,185,120,0)}}
.hero .lede{margin-top:22px}
.hero .btnrow{margin-top:32px}
.heroin{position:relative; z-index:2}
.herofig{position:relative; aspect-ratio:1/.92; min-height:300px}
.herofig canvas{width:100%; height:100%; display:block}

/* the strip under the hero: what we actually move */
.ribbon{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--mist)}
.ribbon .in{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  max-width:var(--maxw); margin:0 auto}
.ribbon .cell{background:var(--mist); padding:clamp(20px,2.6vw,30px) clamp(16px,2.4vw,34px)}
.ribbon{background:linear-gradient(90deg,var(--claret-wash),var(--green-wash) 52%,var(--sand))}
.ribbon .in{background:transparent; gap:0}
.ribbon .cell{background:transparent; border-right:1px solid rgba(22,32,42,.08)}
.ribbon .cell:last-child{border-right:0}
.ribbon .v{font-size:clamp(1.55rem,2.7vw,2.15rem); font-weight:800; letter-spacing:-.03em; line-height:1}
.ribbon .cell:nth-child(1) .v{color:var(--claret)}
.ribbon .cell:nth-child(2) .v{color:var(--green)}
.ribbon .cell:nth-child(3) .v{color:var(--gold-dp)}
.ribbon .cell:nth-child(4) .v{color:var(--signal)}
.ribbon .k{font-size:13px; color:var(--ink2); margin-top:8px}

/* ------------------------------- services ------------------------------- */
.svcgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,30px)}
.svc{position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(26px,3vw,40px);
  transition:transform .35s var(--ease), box-shadow .35s, border-color .35s}
.svc:hover{transform:translateY(-4px); border-color:var(--line2);
  box-shadow:0 30px 60px -44px rgba(22,32,42,.55)}
.svc::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--r) var(--r) 0 0;
  background:var(--gold); opacity:.9}
.svc.sms::before{background:linear-gradient(90deg,var(--claret),var(--claret-2))}
.svc.sim::before{background:linear-gradient(90deg,var(--green),var(--green-2))}
.svc .ic{width:46px; height:46px; margin-bottom:20px; color:var(--gold);
  padding:9px; border-radius:12px; background:var(--gold-wash)}
.svc.sms .ic{color:var(--claret); background:var(--claret-wash)}
.svc.sim .ic{color:var(--green); background:var(--green-wash)}
.svc.sms li::before{background:var(--claret)}
.svc.sim li::before{background:var(--green)}
.svc.sms:hover{border-color:#BFD3FA} .svc.sim:hover{border-color:#A9E0DB}
.svc h3{margin-bottom:10px}
.svc p{color:var(--ink2); margin-bottom:20px}
.svc ul{list-style:none; margin:0 0 24px; padding:0; display:grid; gap:9px}
.svc li{display:flex; gap:10px; font-size:15px; color:var(--ink2); align-items:flex-start}
.svc li::before{content:""; width:5px; height:5px; margin-top:9px; border-radius:50%;
  background:var(--gold); flex:0 0 auto}
.svc .go{margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:600;
  font-size:15px; color:var(--ink)}
.svc .go svg{transition:transform .3s var(--ease)}
.svc:hover .go svg{transform:translateX(5px)}

/* -------------------------------- reasons ------------------------------- */
.reasons{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.reason{background:var(--paper); padding:clamp(24px,2.7vw,34px)}
.reason{position:relative}
.reason .n{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  color:var(--gold-dp); background:var(--gold-wash); padding:5px 10px; border-radius:999px}
.reasons > .reason:nth-child(3n+1) .n{color:var(--claret); background:var(--claret-wash)}
.reasons > .reason:nth-child(3n+2) .n{color:var(--green); background:var(--green-wash)}
.reason h3{margin:12px 0 9px; font-size:1.12rem}
.reason p{color:var(--ink2); font-size:15px; margin:0}

/* -------------------------------- tables -------------------------------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--paper)}
table.data{width:100%; border-collapse:collapse; min-width:560px}
table.data thead{background:linear-gradient(90deg,var(--claret-wash),var(--green-wash))}
table.data th{text-align:left; font-size:12px; font-weight:700; letter-spacing:.06em; color:#4A5C6E;
  padding:16px 20px; border-bottom:1px solid var(--line); white-space:nowrap}
table.data tbody tr:hover td{background:rgba(13,158,151,.045)}
table.data td{padding:16px 20px; border-bottom:1px solid var(--line); color:var(--ink2); font-size:15px}
table.data tr:last-child td{border-bottom:0}
table.data td:first-child{color:var(--ink); font-weight:600}
table.data .num{text-align:right; font-variant-numeric:tabular-nums}
table.data .ok{color:var(--signal); font-weight:600}

/* --------------------------------- steps -------------------------------- */
.steps{counter-reset:s; display:grid; gap:0}
.step{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:22px;
  padding:clamp(20px,2.4vw,28px) 0; border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{content:counter(s,decimal-leading-zero); font-size:12.5px; font-weight:700;
  color:var(--green); padding-top:2px; font-variant-numeric:tabular-nums;
  background:var(--green-wash); border-radius:999px; width:34px; height:34px;
  display:grid; place-items:center}
.step h3{margin-bottom:7px; font-size:1.1rem}
.step p{color:var(--ink2); margin:0; max-width:64ch; font-size:15.5px}

/* ---------------------------------- FAQ --------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:22px 42px 22px 0; position:relative;
  font-weight:600; font-size:1.03rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:30px; width:11px; height:11px;
  border-right:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:rotate(45deg); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg); top:34px}
.faq .ans{padding:0 0 24px; color:var(--ink2); max-width:74ch}

/* ---------------------------------- CTA --------------------------------- */
.cta{background:
    radial-gradient(60% 120% at 92% 6%, rgba(168,32,43,.55) 0%, rgba(168,32,43,0) 62%),
    linear-gradient(118deg,#0F3226 0%,#16202A 52%,#1A3B30 100%);
  color:#fff; border-radius:var(--r); overflow:hidden; position:relative}
.cta .in{position:relative; z-index:2; padding:clamp(38px,5.2vw,74px); display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,3vw,48px); align-items:center}
.cta h2{color:#fff}
.cta p{color:#AFBECC; margin:16px 0 0; max-width:52ch}
.cta canvas{position:absolute; inset:0 0 0 auto; width:48%; height:100%; opacity:.55; z-index:1}
@media (max-width:1060px){ .cta canvas{width:100%; opacity:.3} }
.cta .btnrow{justify-content:flex-end}
.cta .btn.ghost{background:transparent; border-color:rgba(255,255,255,.28); color:#fff}
.cta .btn.ghost:hover{border-color:var(--gold-lt); color:var(--gold-lt)}

/* --------------------------------- footer ------------------------------- */
footer{position:relative; border-top:1px solid var(--line); padding:clamp(46px,5.6vw,76px) 0 30px;
  background:linear-gradient(160deg,var(--claret-wash) 0%,var(--mist) 40%,var(--sand) 100%)}
/* the three accents meet once, as a hairline across the top of the footer */
footer::before{content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg,var(--claret),var(--green) 48%,var(--gold))}
.fgrid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(26px,3vw,50px)}
.fbrand .lock{flex-direction:column; align-items:center; width:max-content; gap:10px; margin-bottom:18px}
.fbrand .lock img{width:100px}
.fbrand .lock .bn{color:var(--gold-dp)}
.fbrand .lock .bg i{background:var(--gold)}
.fbrand .lock .bg em{color:var(--gold-dp)}
.fbrand .lock .bs{color:var(--ink3)}
.fbrand p{color:var(--ink2); font-size:14.5px; margin:14px 0 0; max-width:34ch}
footer h4{font-size:12px; letter-spacing:.08em; color:var(--ink3); font-weight:700; margin-bottom:16px}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
footer li a,footer address a{font-size:15px; color:var(--ink2); transition:color .25s}
footer li a:hover,footer address a:hover{color:var(--gold-dp)}
footer address{font-style:normal; font-size:15px; color:var(--ink2); line-height:1.72}
.fbot{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin-top:clamp(34px,4vw,58px); padding-top:22px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink3)}
.fbot nav{display:flex; gap:18px}

/* --------------------------------- forms -------------------------------- */
.form{display:grid; gap:16px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
label{display:grid; gap:7px; font-size:14px; font-weight:600; color:var(--ink)}
label .opt{font-style:normal; font-weight:500; font-size:12.5px; color:var(--ink3); margin-left:5px}
input,select,textarea{font:inherit; font-size:15.5px; padding:13px 15px; border:1px solid var(--line2);
  border-radius:10px; background:var(--paper); color:var(--ink); width:100%;
  transition:border-color .25s, box-shadow .25s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(184,146,79,.14)}
textarea{min-height:130px; resize:vertical}
.note{font-size:13.5px; color:var(--ink3)}
/* the honeypot must be reachable by bots but invisible and unfocusable to people */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ------------------------------- utilities ------------------------------ */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,4vw,70px);
  align-items:start}
.stack{display:grid; gap:clamp(16px,2vw,26px)}
.card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px)}
.card.wash{background:var(--gold-wash); border-color:#EFE3CB}
.card.sig{background:var(--signal-wash); border-color:#CFE7E1}
.card.sky{background:var(--claret-wash); border-color:#D3E1FB}
.card.aqua{background:var(--green-wash); border-color:#BFE7E3}
.kv{display:grid; gap:0}
.kv div{display:flex; justify-content:space-between; gap:20px; padding:13px 0;
  border-bottom:1px solid var(--line); font-size:15px}
.kv div:last-child{border-bottom:0}
.kv dt{color:var(--ink2); margin:0} .kv dd{margin:0; font-weight:600; text-align:right}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:6px 13px; border-radius:999px; background:var(--gold-wash); color:var(--gold-dp)}
.pill.sig{background:var(--signal-wash); color:var(--signal)}
.pill.sky{background:var(--claret-wash); color:var(--claret)}
.pill.aqua{background:var(--green-wash); color:var(--green)}
.hr{height:1px; background:var(--line); border:0; margin:0}

/* the sister brand: a band that reads as a doorway out, not another service card */
.sister{position:relative; overflow:hidden; border:1px solid #EFE3CB; border-radius:var(--r);
  background:
    radial-gradient(70% 130% at 96% 8%, rgba(184,146,79,.20) 0%, rgba(184,146,79,0) 60%),
    var(--gold-wash);
  padding:clamp(28px,4vw,54px); display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(0,.75fr); gap:clamp(22px,3.4vw,56px);
  align-items:center}
.sister h2{margin:16px 0 12px; font-size:clamp(1.5rem,2.7vw,2.15rem)}
.sister p{color:var(--ink2); max-width:56ch; margin:0}
.sisterfig{display:flex; flex-wrap:wrap; gap:clamp(20px,3vw,44px); margin:24px 0 26px}
.sisterfig div{display:grid}
.sisterfig dt{font-size:clamp(1.4rem,2.2vw,1.8rem); font-weight:800; letter-spacing:-.03em;
  color:var(--gold-dp); line-height:1}
.sisterfig dd{margin:6px 0 0; font-size:13.5px; color:var(--ink2)}
.sisternote{align-self:end; font-size:14.5px; color:var(--ink2); border-left:2px solid var(--gold);
  padding-left:18px; max-width:34ch}
@media (max-width:900px){
  .sister{grid-template-columns:1fr}
  .sisternote{border-left:0; border-top:2px solid var(--gold); padding:16px 0 0; max-width:none}
}

/* page banner for inner pages */
.pagehead{position:relative; overflow:hidden; color:#fff;
  padding:calc(var(--navh) + clamp(30px,4vw,58px)) 0 clamp(58px,6.6vw,96px);
  background:
    radial-gradient(58% 92% at 50% 110%, rgba(217,185,120,.26) 0%, rgba(217,185,120,0) 66%),
    linear-gradient(110deg,#8E1522 0%,#A8202B 36%,#AE7F45 58%,#25906F 74%,#46B896 100%)}
.pagehead::after{content:""; position:absolute; left:-2%; right:-2%; bottom:-1px;
  height:clamp(28px,4vw,58px); background:var(--paper);
  border-radius:50% 50% 0 0 / 100% 100% 0 0}
.pagehead .wrap{position:relative; z-index:2}
.pagehead .lede{color:rgba(255,255,255,.82)}
.pagehead .crumb{color:rgba(255,255,255,.62)}
.pagehead .crumb a:hover{color:var(--gold-lt)}
.pagehead .btn.solid{background:#fff; color:var(--ink)}
.pagehead .btn.solid:hover{background:var(--gold-lt); color:#241B08}
.pagehead .btn.ghost{background:transparent; border-color:rgba(255,255,255,.34); color:#fff}
.pagehead .btn.ghost:hover{border-color:var(--gold-lt); color:var(--gold-lt)}
/* each service keeps its own hue inside the shared band */
.pagehead.claret{background:linear-gradient(110deg,#7E1120 0%,#A8202B 42%,#B4864A 68%,#2A9476 100%)}
.pagehead.green{background:linear-gradient(110deg,#9A1B28 0%,#AE7F45 26%,#25906F 56%,#46B896 100%)}
.pagehead.sand{background:linear-gradient(110deg,#8E1522 0%,#B0803F 38%,#C79A52 52%,#25906F 78%,#3FAC8B 100%)}
.crumb{font-size:13.5px; color:var(--ink3); margin-bottom:18px}
.crumb a:hover{color:var(--gold-dp)}
.pagehead h1{max-width:18ch}
.pagehead .lede{margin-top:20px}

/* --------------------------------- motion -------------------------------- */
.rv{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.on{opacity:1; transform:none}
.rv.d1{transition-delay:.07s} .rv.d2{transition-delay:.14s} .rv.d3{transition-delay:.21s}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
}

/* ------------------------------- responsive ------------------------------ */
@media (max-width:1060px){
  .heroin{grid-template-columns:1fr; gap:34px}
  .herofig{order:-1; aspect-ratio:1/.62; min-height:240px}
  .fgrid{grid-template-columns:1fr 1fr; gap:32px}
  .cta .in{grid-template-columns:1fr}
  .cta .btnrow{justify-content:flex-start}
  .reasons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .svcgrid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .ribbon .in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .burger{display:block}
  .navlinks{position:fixed; inset:var(--navh) 0 auto 0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--paper); padding:8px var(--gut) 26px;
    border-bottom:1px solid var(--line); opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s, transform .3s, visibility .3s; max-height:calc(100vh - var(--navh)); overflow:auto}
  body.navopen .navlinks{opacity:1; visibility:visible; transform:none}
  .navlinks a{padding:16px 2px; font-size:16.5px; color:var(--ink); border-bottom:1px solid var(--line)}
  .navlinks a::after{display:none}
  .navlinks .navcta{margin-top:18px; text-align:center; background:var(--ink); color:#fff;
    border-radius:999px; border-bottom:0 !important}
  .reasons{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .step{grid-template-columns:1fr; gap:8px}
}
@media (max-width:420px){
  .ribbon .in{grid-template-columns:1fr}
  .brand .bs{display:none}
}