/* ============================================================
   CADER SOLUTION — graphite / amber
   Photo-led, dark-anchored, warm accent. Rounded only where a
   surface is interactive; structural edges stay square.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo.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: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-700.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.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;
}

:root{
  --graphite:  #15181b;
  --graphite-2:#1d2126;
  --graphite-3:#2a2f36;
  --ink:       #101316;
  --paper:     #ffffff;
  --paper-2:   #f5f5f3;
  --paper-3:   #ebebe7;
  --line:      #dedeD8;
  --line-dark: #333940;
  --body:      #4d545c;
  --body-dark: #a7b0b8;
  --amber:     #e0a42b;
  --amber-dk:  #b9821a;
  --steel:     #1f5e5b;
  --steel-lt:  #2d817d;

  --shell: 1260px;
  --gut: clamp(20px, 5vw, 60px);

  --f-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-b: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-display: "Space Grotesk", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-tech: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-b); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
body.locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:2.5px solid var(--amber); outline-offset:3px; }

h1,h2,h3,h4{ font-family:var(--f-d); font-weight:600; line-height:1.08; letter-spacing:-.021em; margin:0 0 .55em; }
h1{ font-size:clamp(2.4rem,5.2vw,4.1rem); letter-spacing:-.033em; }
h2{ font-size:clamp(1.8rem,3.3vw,2.7rem); letter-spacing:-.027em; }
h3{ font-size:1.15rem; }
p{ margin:0 0 1em; max-width:66ch; color:var(--body); }
.lead{ font-size:clamp(1.02rem,1.5vw,1.2rem); line-height:1.58; }
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* eyebrow: a rule and a word, tied to the section it opens */
.eyebrow{
  font-family:var(--f-d); font-weight:600; font-size:.78rem; letter-spacing:.02em;
  color:var(--amber-dk); display:flex; align-items:center; gap:.7rem; margin:0 0 1rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--amber); flex:none; }
.on-dark .eyebrow{ color:var(--amber); }
.on-dark, .on-dark p{ color:var(--body-dark); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--f-d); font-weight:600; font-size:.95rem; letter-spacing:-.005em;
  padding:.85rem 1.5rem; border-radius:100px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .2s var(--ease), color .2s, border-color .2s, transform .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-amber{ background:var(--amber); color:#1a1509; }
.btn-amber:hover{ background:#f0b33c; }
.btn-dark{ background:var(--graphite); color:#fff; }
.btn-dark:hover{ background:var(--steel); }
.btn-out{ border-color:currentColor; background:transparent; }
.on-dark .btn-out{ color:#fff; }
.on-dark .btn-out:hover{ background:#fff; color:var(--graphite); border-color:#fff; }
.btn-out:hover{ background:var(--graphite); color:#fff; border-color:var(--graphite); }
.btn-sm{ padding:.6rem 1.1rem; font-size:.88rem; }
.btn-pay{ background:var(--steel); color:#fff; border-color:var(--steel); }
.btn-pay:hover{ background:var(--steel-lt); border-color:var(--steel-lt); color:#fff; }

/* ============================================================
   HEADER
   ============================================================ */
.bar{ background:var(--graphite); color:#c6ccd2; font-size:.82rem; min-height:40px; }
.bar .shell{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:40px; flex-wrap:wrap; }
.bar a{ color:#e4e8ec; text-decoration:none; }
.bar a:hover{ color:var(--amber); }
.bar-regions{ display:flex; gap:1.3rem; }
.bar-regions b{ font-weight:500; opacity:.62; margin-right:.35rem; }

.head{ position:sticky; top:0; z-index:70; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line); min-height:86px; }
.head .shell{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:86px; }
.logo{ display:flex; align-items:center; gap:.75rem; text-decoration:none; }
.logo img{ height:70px; width:auto; object-fit:contain; border-radius:6px; flex:none; }
.logo-text{ display:flex; flex-direction:column; justify-content:center; }
.logo-text b{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.06rem;
  letter-spacing:.055em;
  color:var(--ink);
  line-height:1.12;
  display:block;
}
.logo-text small{
  font-family:var(--f-tech);
  font-size:.575rem;
  letter-spacing:.18em;
  color:#5f7286;
  line-height:1.2;
  margin-top:2px;
  display:block;
  font-weight:500;
}
@media (max-width:480px){
  .logo{ gap:.55rem; }
  .logo img{ height:56px; }
  .logo-text b{ font-size:.92rem; letter-spacing:.04em; }
  .logo-text small{ font-size:.51rem; letter-spacing:.14em; }
}
.menu{ display:flex; align-items:center; gap:.2rem; }
.menu a:not(.btn){ text-decoration:none; font-weight:500; font-size:.96rem; padding:.55rem .9rem; border-radius:100px; color:var(--body); transition:color .18s, background .18s; }
.menu a:not(.btn):hover{ color:var(--ink); background:var(--paper-2); }
.menu a:not(.btn)[aria-current="page"]{ color:var(--ink); }
.menu a:not(.btn)[aria-current="page"]::after{ content:""; display:block; height:2px; background:var(--amber); margin-top:3px; }
.menu .btn{ margin-left:.55rem; padding:.75rem 1.25rem; font-size:.9rem; }
.hamb{ display:none; width:46px; height:44px; border:1px solid var(--line); background:#fff; border-radius:10px; cursor:pointer; }
.hamb i{ display:block; width:19px; height:1.6px; background:var(--ink); margin:4px auto; transition:transform .22s var(--ease), opacity .18s; }
.hamb[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.hamb[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.hamb[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

@media (max-width:960px){
  .head{ min-height:79px; }
  .head .shell{ min-height:78px; }
  .logo img{ height:56px; }
  .hamb{ display:block; }
  .menu{
    position:fixed; left:0; right:0; top:78px; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0; padding:.5rem var(--gut) 1.5rem;
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    box-shadow:0 24px 40px -30px rgba(0,0,0,.5);
  }
  .menu.open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .menu a:not(.btn){ padding:.95rem .3rem; border-radius:0; border-bottom:1px solid var(--paper-3); }
  .menu .btn{ margin:.75rem 0 0; width:100%; text-align:center; }
  .bar-regions{ gap:.9rem; font-size:.76rem; }
}
@media (max-width:620px){
  .bar-regions span:nth-child(n+2){ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; color:#fff; overflow:hidden;
  background:radial-gradient(130% 100% at 80% 12%, #2b3238 0%, #191d21 48%, #101316 100%); }
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s var(--ease), transform 8s linear;
  transform:scale(1.04);
}
.hero-media img:first-child,
.hero-media img.on{ opacity:1; transform:scale(1); }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(16,19,22,.96) 0%, rgba(16,19,22,.86) 38%, rgba(16,19,22,.42) 72%, rgba(16,19,22,.62) 100%),
    linear-gradient(0deg, rgba(16,19,22,.85) 0%, transparent 45%);
}
.hero > .shell{ position:relative; padding-block:clamp(4rem,10vw,8.5rem) clamp(2.4rem,5vw,4rem); }
.hero h1{ max-width:16ch; color:#fff; }
.hero p{ color:#cfd5da; max-width:52ch; font-size:clamp(1.02rem,1.5vw,1.18rem); }
.hero-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:2rem; }
.hero-in{ opacity:0; transform:translateY(14px); animation:rise .8s var(--ease) forwards; }
.hero-in:nth-child(2){ animation-delay:.1s } .hero-in:nth-child(3){ animation-delay:.2s }
@keyframes rise{ to{ opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce){ .hero-in{ opacity:1; transform:none; animation:none; } }

/* capability rail — clicking swaps the hero photograph */
.rail{ position:relative; border-top:1px solid rgba(255,255,255,.14); }
.rail .shell{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding-block:0; }
.rail button{
  all:unset; box-sizing:border-box; cursor:pointer; padding:1.25rem 1.3rem 1.4rem;
  border-right:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:.25rem;
  transition:background .25s var(--ease); position:relative;
}
.rail button:first-child{ border-left:1px solid rgba(255,255,255,.14); }
.rail button:hover{ background:rgba(255,255,255,.07); }
.rail button strong{ font-family:var(--f-d); font-size:1.02rem; color:#fff; font-weight:600; }
.rail button span{ font-size:.85rem; color:#9aa4ad; }
.rail button::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.rail button[aria-pressed="true"]::after{ transform:scaleX(1); }
.rail button[aria-pressed="true"] span{ color:#c9d0d6; }
@media (max-width:860px){
  .rail .shell{ grid-template-columns:1fr 1fr; }
  .rail button{ border-bottom:1px solid rgba(255,255,255,.14); }
  .rail button:nth-child(odd){ border-left:1px solid rgba(255,255,255,.14); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{ padding-block:clamp(3.6rem,7vw,6.5rem); }
.sec-tint{ background:var(--paper-2); }
.sec-dark{ background:var(--graphite); }
.sec-steel{ background:var(--steel); }
.sec-steel .eyebrow{ color:#9fe0da; }
.sec-steel .eyebrow::before{ background:#9fe0da; }
.head-2{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem; align-items:end; margin-bottom:clamp(2rem,3.6vw,3rem); }
@media (max-width:760px){ .head-2{ grid-template-columns:1fr; align-items:start; } }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-dark); }
.stats div{ padding:2rem 1.5rem 2.2rem; border-right:1px solid var(--line-dark); }
.stats div:last-child{ border-right:none; }
.stats b{ font-family:var(--f-d); font-size:clamp(2.1rem,4vw,3.1rem); font-weight:600; color:#fff; display:block; line-height:1; letter-spacing:-.03em; }
.stats span{ font-size:.9rem; color:var(--body-dark); display:block; margin-top:.5rem; max-width:22ch; }
@media (max-width:760px){
  .stats{ grid-template-columns:1fr 1fr; }
  .stats div:nth-child(2n){ border-right:none; }
  .stats div:nth-child(n+3){ border-top:1px solid var(--line-dark); }
}

/* ============================================================
   SERVICE EXPLORER
   ============================================================ */
.explorer{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; }
.ex-list{ display:flex; flex-direction:column; }
.ex-item{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:1rem; align-items:baseline;
  padding:1.15rem .4rem; border-top:1px solid var(--line); transition:color .2s, padding .3s var(--ease);
}
.ex-item:last-child{ border-bottom:1px solid var(--line); }
.ex-item em{ font-style:normal; font-family:var(--f-d); font-size:.8rem; color:#9aa2aa; min-width:1.6rem; }
.ex-item strong{ font-family:var(--f-d); font-weight:600; font-size:clamp(1.05rem,1.8vw,1.35rem); letter-spacing:-.02em; color:var(--body); transition:color .2s; }
.ex-item:hover strong{ color:var(--ink); }
.ex-item[aria-selected="true"]{ padding-left:1rem; }
.ex-item[aria-selected="true"] strong{ color:var(--ink); }
.ex-item[aria-selected="true"] em{ color:var(--amber-dk); }
.ex-panel{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.sec-tint .ex-panel{ background:#fff; }
.ex-photo{ aspect-ratio:16/9; background:var(--paper-3); position:relative; overflow:hidden; }
.ex-photo img{ width:100%; height:100%; object-fit:cover; }
.ex-body{ padding:1.6rem 1.7rem 1.8rem; }
.ex-body h3{ font-size:1.35rem; margin-bottom:.5rem; }
.ex-body ul{ list-style:none; margin:1.2rem 0 1.5rem; padding:0; display:grid; gap:.05rem; }
.ex-body li{ padding:.5rem 0 .5rem 1.5rem; position:relative; font-size:.93rem; border-top:1px solid var(--paper-3); color:var(--ink); }
.ex-body li::before{ content:""; position:absolute; left:0; top:1.02em; width:8px; height:8px; border-radius:50%; border:2px solid var(--amber); }
.fade-swap{ animation:fadein .45s var(--ease); }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
@media (max-width:900px){ .explorer{ grid-template-columns:1fr; } }

/* service cards (services page) */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.3rem; }
.card{
  background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 40px -30px rgba(16,19,22,.45); border-color:#cfcfc8; }
.card-photo{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-3); }
.card-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.card:hover .card-photo img{ transform:scale(1.05); }
.card-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.card-body h3{ margin-bottom:.4rem; }
.card-body p{ font-size:.92rem; margin-bottom:1.1rem; }
.card-more{ margin-top:auto; font-family:var(--f-d); font-weight:600; font-size:.9rem; color:var(--steel); }
.tag{ display:inline-block; font-family:var(--f-d); font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--amber-dk); margin-bottom:.6rem; }

/* ============================================================
   WORK
   ============================================================ */
.chips{ display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:1.8rem; }
.chips button{
  font-family:var(--f-b); font-size:.88rem; background:#fff; border:1px solid var(--line);
  color:var(--body); padding:.5rem 1rem; border-radius:100px; cursor:pointer; transition:.18s;
}
.chips button:hover{ border-color:var(--graphite); color:var(--ink); }
.chips button[aria-pressed="true"]{ background:var(--graphite); border-color:var(--graphite); color:#fff; }

.grid-work{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.3rem; }
.tile{
  all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:block;
  border-radius:18px; overflow:hidden; background:var(--graphite); aspect-ratio:4/3;
}
.tile img, .tile svg{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), opacity .4s; }
.tile:hover img, .tile:hover svg{ transform:scale(1.06); }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(16,19,22,.9) 0%, rgba(16,19,22,.35) 42%, rgba(16,19,22,0) 70%);
}
.tile-cap{ position:absolute; left:0; right:0; bottom:0; padding:1.2rem 1.3rem; z-index:2; }
.tile-cap em{ font-style:normal; font-size:.78rem; color:var(--amber); font-family:var(--f-d); font-weight:600; }
.tile-cap h3{ color:#fff; font-size:1.06rem; margin:.25rem 0 0; }
.tile-cap p{ color:#b8c0c7; font-size:.84rem; margin:.2rem 0 0;
  max-height:0; overflow:hidden; opacity:0; transition:max-height .35s var(--ease), opacity .3s; }
.tile:hover .tile-cap p, .tile:focus-visible .tile-cap p{ max-height:3em; opacity:1; }
.empty{ color:var(--body); padding:2rem 0; }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:200; display:none; }
.lb.show{ display:block; }
.lb-bg{ position:absolute; inset:0; background:rgba(10,12,14,.82); backdrop-filter:blur(4px); }
.lb-box{
  position:relative; width:min(1000px, calc(100% - 2rem)); margin:6vh auto 0; background:#fff;
  border-radius:20px; overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; max-height:86vh;
}
.lb-box .pic{ background:var(--paper-3); }
.lb-box .pic img, .lb-box .pic svg{ width:100%; height:100%; object-fit:cover; }
.lb-info{ padding:2rem 2.1rem 2.2rem; overflow:auto; }
.lb-info h3{ font-size:1.5rem; margin:.4rem 0 1rem; }
.lb-row{ border-top:1px solid var(--paper-3); padding:.8rem 0; font-size:.94rem; color:var(--ink); }
.lb-row b{ display:block; font-family:var(--f-d); font-size:.74rem; letter-spacing:.02em; color:#8d959d; margin-bottom:.2rem; font-weight:600; }
.lb-x{ position:absolute; top:.8rem; right:.9rem; z-index:3; width:38px; height:38px; border-radius:50%; border:none; background:#fff; cursor:pointer; font-size:1.05rem; box-shadow:0 6px 18px -8px rgba(0,0,0,.4); }
.lb-nav{ position:absolute; top:50%; z-index:3; width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.92); cursor:pointer; font-size:1.1rem; transform:translateY(-50%); }
.lb-nav.prev{ left:.8rem; } .lb-nav.next{ left:auto; right:calc(45% + .8rem); }
@media (max-width:820px){
  .lb-box{ grid-template-columns:1fr; margin-top:3vh; }
  .lb-box .pic{ aspect-ratio:16/10; }
  .lb-info{ padding:1.4rem; }
  .lb-nav.next{ right:.8rem; }
}

/* ============================================================
   PROCESS / PRINCIPLES / QUOTES / FAQ
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:1.6rem; counter-reset:s; }
.stp{ counter-increment:s; padding-top:1.6rem; border-top:2px solid var(--line-dark); position:relative; }
.sec-tint .stp{ border-color:var(--line); }
.stp::before{
  content:counter(s); position:absolute; top:-1.05rem; left:0; background:var(--amber); color:#1a1509;
  width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-d); font-weight:700; font-size:.9rem;
}
.stp h3{ margin:.8rem 0 .35rem; font-size:1.05rem; }
.stp p{ font-size:.9rem; margin:0; }
.sec-dark .stp h3{ color:#fff; }

.princ{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2rem 2.4rem; }
.princ h3{ font-size:1.05rem; margin-bottom:.4rem; }
.princ p{ font-size:.93rem; margin:0; }

.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
.qt{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.8rem 1.7rem; }
.sec-tint .qt{ background:#fff; }
.qt blockquote{ margin:0 0 1.2rem; font-size:1.03rem; line-height:1.55; color:var(--ink); }
.qt::before{ content:""; display:block; width:30px; height:3px; background:var(--amber); margin-bottom:1.2rem; }
.qt cite{ font-style:normal; font-size:.86rem; }
.qt cite b{ display:block; font-family:var(--f-d); color:var(--ink); }
.qt cite span{ color:var(--body); }

.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-child{ border-top:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; padding:1.2rem 2.6rem 1.2rem 0; position:relative; font-family:var(--f-d); font-weight:600; font-size:1.03rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after,.faq summary::before{ content:""; position:absolute; right:.5rem; top:1.85rem; background:var(--amber-dk); transition:transform .22s var(--ease); }
.faq summary::after{ width:14px; height:2px; }
.faq summary::before{ width:2px; height:14px; right:calc(.5rem + 6px); top:1.4rem; }
.faq details[open] summary::before{ transform:rotate(90deg); opacity:0; }
.faq p{ margin:0 0 1.4rem; font-size:.96rem; }

/* split blocks */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }
.figure{ border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); }
.figure img{ width:100%; height:100%; object-fit:cover; }
.ticks{ list-style:none; margin:1.4rem 0 0; padding:0; }
.ticks li{ padding:.62rem 0 .62rem 1.9rem; border-top:1px solid rgba(255,255,255,.14); position:relative; font-size:.95rem; }
.sec-tint .ticks li, .sec .ticks li{ border-color:var(--line); }
.sec-dark .ticks li, .sec-steel .ticks li{ border-color:rgba(255,255,255,.16); color:#dfe4e8; }
.ticks li::before{ content:""; position:absolute; left:2px; top:1.15em; width:10px; height:5px; border-left:2px solid var(--amber); border-bottom:2px solid var(--amber); transform:rotate(-45deg); }

/* ============================================================
   REQUEST BAND (home + inner pages)
   ============================================================ */
.request{ background:var(--graphite); color:#fff; }
.request .shell{ padding-block:clamp(3rem,6vw,5rem); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.request h2{ color:#fff; }
.request p{ color:var(--body-dark); }
.request-lines{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap:.9rem; }
.request-lines a{ color:#fff; text-decoration:none; display:flex; gap:.7rem; align-items:center; font-size:.98rem; }
.request-lines a:hover{ color:var(--amber); }
.request-lines .flag{ font-size:1.15rem; }
@media (max-width:900px){ .request .shell{ grid-template-columns:1fr; } }

/* form */
.form{ display:grid; gap:1rem; }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .f2{ grid-template-columns:1fr; } }
.field label{ display:block; font-size:.82rem; font-weight:500; margin-bottom:.35rem; color:inherit; opacity:.85; }
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.96rem; padding:.82rem .95rem; border-radius:12px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink); transition:border-color .18s, box-shadow .18s;
}
.request .field input,.request .field select,.request .field textarea,
.drawer .field input,.drawer .field select,.drawer .field textarea{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff;
}
.request .field select,
.drawer .field select{
  color-scheme: dark;
}
.request .field select option,
.drawer .field select option{
  background: #1d2126;
  color: #ffffff;
}
.sec .field select{
  color-scheme: light;
}
.sec .field select option{
  background: #ffffff;
  color: #101316;
}
.request .field input::placeholder,.drawer .field textarea::placeholder{ color:#8b959d; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(224,164,43,.22); }
.field textarea{ min-height:118px; resize:vertical; }
.field.bad input,.field.bad select,.field.bad textarea{ border-color:#e06a4a; }
.err{ display:none; font-size:.8rem; color:#e06a4a; margin-top:.3rem; }
.field.bad .err{ display:block; }
.note{ font-size:.82rem; opacity:.75; margin:0; }
.status{ display:none; font-size:.93rem; padding:.9rem 1.05rem; border-radius:12px; }
.status.ok{ display:block; background:rgba(45,129,125,.18); border:1px solid var(--steel-lt); color:#bff0ea; }
.status.no{ display:block; background:rgba(224,106,74,.14); border:1px solid #e06a4a; color:#ffcbbc; }
.sec .status.ok{ background:#e7f4f2; color:#14524f; }
.sec .status.no{ background:#fdeee9; color:#9c3d20; }
.hp{ position:absolute; left:-9999px; }

/* ============================================================
   GET-IN-TOUCH DRAWER
   ============================================================ */
.tab{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:75;
  background:var(--amber); color:#1a1509; border:none; cursor:pointer;
  font-family:var(--f-d); font-weight:600; font-size:.86rem; letter-spacing:.02em;
  padding:1.1rem .72rem; border-radius:12px 0 0 12px; writing-mode:vertical-rl;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5); transition:padding .2s var(--ease), background .2s;
}
.tab:hover{ padding-right:1rem; background:#f0b33c; }
@media (max-width:620px){ .tab{ display:none; } }

/* mobile sticky action bar — the drawer is always one tap away */
.dock{ display:none; }
@media (max-width:620px){
  .dock{
    display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:center;
    position:fixed; left:0; right:0; bottom:0; z-index:78;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(21,24,27,.96); backdrop-filter:blur(10px); border-top:1px solid #2b3137;
  }
  .dock .btn{ width:100%; }
  .dock .call{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; text-decoration:none; }
  .dock .call svg{ width:20px; height:20px; fill:currentColor; display:block; }
  body{ padding-bottom:74px; }
  .wa{ bottom:86px; width:48px; height:48px; }
}

.scrim{ position:fixed; inset:0; background:rgba(10,12,14,.6); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; z-index:90; }
.scrim.show{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(480px,100%); z-index:95;
  background:var(--graphite); color:#fff; transform:translateX(100%);
  transition:transform .42s var(--ease), visibility .42s; display:flex; flex-direction:column;
  box-shadow:-30px 0 60px -40px rgba(0,0,0,.8);
  visibility:hidden;
}
.drawer.open{ transform:none; visibility:visible; }
.drawer-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.6rem 1.7rem 1rem; }
.drawer-top h2{ font-size:1.55rem; margin:0 0 .35rem; color:#fff; }
.drawer-top p{ margin:0; font-size:.92rem; color:var(--body-dark); }
.drawer-x{ background:rgba(255,255,255,.1); border:none; color:#fff; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem; flex:none; }
.drawer-x:hover{ background:rgba(255,255,255,.2); }
.drawer-body{ padding:.6rem 1.7rem 2rem; overflow-y:auto; flex:1; }
.drawer-foot{ border-top:1px solid var(--line-dark); padding:1rem 1.7rem; display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.86rem; }
.drawer-foot a{ color:var(--body-dark); text-decoration:none; }
.drawer-foot a:hover{ color:var(--amber); }
.done{ text-align:left; padding:1rem 0; }
.done .mark{ width:54px; height:54px; border-radius:50%; background:var(--steel-lt); display:grid; place-items:center; margin-bottom:1.1rem; }
.done .mark::after{ content:""; width:18px; height:9px; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) translate(2px,-2px); }

/* ============================================================
   PAGE HEAD / DETAIL / CONTACT / FOOTER
   ============================================================ */
.phead{ background:var(--graphite); color:#fff; position:relative; overflow:hidden; }
.phead .bgimg{ position:absolute; inset:0; opacity:.3; }
.phead .bgimg img{ width:100%; height:100%; object-fit:cover; }
.phead::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(16,19,22,.95), rgba(16,19,22,.6)); }
.phead .shell{ position:relative; z-index:2; padding-block:clamp(2.8rem,6vw,5rem); }
.phead h1{ color:#fff; max-width:18ch; }
.phead p{ color:#cfd5da; }
.crumb{ font-size:.85rem; color:#98a2aa; margin-bottom:1rem; }
.crumb a{ color:var(--amber); text-decoration:none; }

.detail{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(2rem,4vw,3.4rem); align-items:start; }
@media (max-width:880px){ .detail{ grid-template-columns:1fr; } }
.box{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.5rem 1.6rem; }
.box + .box{ margin-top:1.1rem; }
.box h3{ font-size:1rem; margin-bottom:.9rem; }
.pills{ display:flex; flex-wrap:wrap; gap:.4rem; }
.pills span{ font-size:.82rem; border:1px solid var(--line); padding:.3rem .7rem; border-radius:100px; color:var(--body); }
.svcnav{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.svcnav a{ font-size:.88rem; text-decoration:none; border:1px solid var(--line); padding:.45rem .9rem; border-radius:100px; color:var(--body); }
.svcnav a:hover{ border-color:var(--graphite); color:var(--ink); }
.svcnav a.on{ background:var(--graphite); border-color:var(--graphite); color:#fff; }

.offices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.office{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.4rem 1.5rem; }
.office .flag{ font-size:1.6rem; line-height:1; }
.office h3{ margin:.6rem 0 .15rem; font-size:1.02rem; }
.office a{ text-decoration:none; color:var(--steel); font-weight:500; }
.office a:hover{ text-decoration:underline; }
.office p{ font-size:.85rem; margin:.4rem 0 0; }

footer.site{ background:var(--ink); color:#8e979f; padding-block:3.4rem 1.6rem; font-size:.92rem; }
footer.site a{ color:#ccd3d9; text-decoration:none; }
footer.site a:hover{ color:var(--amber); }
.fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr; gap:2.2rem; padding-bottom:2.4rem; border-bottom:1px solid #262c32; }
.fgrid h3, .fgrid h4{ font-size:.82rem; letter-spacing:.04em; color:#a7b0b8; margin:0 0 1rem; font-family:var(--f-d); font-weight:600; text-transform:uppercase; }
.fgrid ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.fbrand .logo{ margin-bottom:1.1rem; gap:.8rem; }
.fbrand .logo img{ height:44px; background:#fff; border-radius:8px; padding:4px 8px; }
.fbrand .logo-text b{ color:#ffffff; font-size:1.1rem; }
.fbrand .logo-text small{ color:#8e979f; }
.fbrand p{ font-size:.88rem; margin:0; max-width:34ch; color:#8e979f; }
.fsocial{ display:flex; gap:.6rem; margin-top:1.1rem; flex-wrap:wrap; font-size:.82rem; }
.fsocial a{ color:var(--amber); text-decoration:none; padding:.25rem .65rem; border:1px solid rgba(224,164,43,.3); border-radius:100px; transition:border-color .18s, background .18s, color .18s; }
.fsocial a:hover{ border-color:var(--amber); background:rgba(224,164,43,.14); color:#fff; }
.fbase{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.4rem; font-size:.82rem; }
@media (max-width:880px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fgrid{ grid-template-columns:1fr; } }

/* floating whatsapp */
.wa{ position:fixed; right:18px; bottom:18px; z-index:76; width:54px; height:54px; border-radius:50%; background:#25d366; display:grid; place-items:center; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); }
.wa svg{ width:27px; height:27px; fill:#fff; }

/* scroll reveal */
.rev{ opacity:0; transform:translateY(16px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rev{ opacity:1; transform:none; } }

/* ============================================================
   PAYMENT PORTAL
   ============================================================ */
.pay-shell{
  max-width: 580px; margin: 0 auto;
}
.pay-card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.5rem, 3.5vw, 2.4rem); box-shadow:0 12px 35px -15px rgba(21,24,27,.07);
}
.pay-presets{
  display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.45rem;
}
.pay-preset-btn{
  background:var(--paper-2); border:1px solid var(--line); border-radius:100px;
  padding:.4rem .9rem; font-size:.85rem; font-weight:600; cursor:pointer;
  transition:all .18s var(--ease); color:var(--ink); font-family:var(--f-tech);
}
.pay-preset-btn:hover{
  background:var(--paper-3); border-color:#c4c8cc;
}
.pay-preset-btn.active{
  background:var(--steel); border-color:var(--steel); color:#fff;
}
.pay-summary{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.3rem; margin:1.2rem 0; font-size:.92rem;
}
.pay-summary-row{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem;
}
.pay-summary-row:last-child{
  margin-bottom:0; padding-top:.6rem; border-top:1px dashed var(--line);
  font-weight:700; font-size:1.05rem; color:var(--ink);
}
.pay-badge-list{
  display:grid; gap:.85rem; margin-top:1.4rem;
}
.pay-badge{
  display:flex; align-items:flex-start; gap:.85rem; font-size:.88rem; color:var(--body);
}
.pay-badge svg{
  width:20px; height:20px; flex-shrink:0; color:var(--steel); margin-top:.15rem;
}
.pay-methods{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1rem;
}
.pay-method-pill{
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  padding:.25rem .55rem; font-size:.78rem; font-weight:600; color:var(--ink);
  font-family:var(--f-tech);
}
.pay-success-card{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:clamp(1.6rem, 3vw, 2.5rem); text-align:center; box-shadow:0 16px 40px -15px rgba(21,24,27,.09);
}
.pay-success-icon{
  width:68px; height:68px; border-radius:50%; background:rgba(31,94,91,.12);
  color:var(--steel); display:grid; place-items:center; margin:0 auto 1.4rem;
}
.pay-receipt-table{
  width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.9rem; text-align:left;
}
.pay-receipt-table td{
  padding:.65rem .8rem; border-bottom:1px solid var(--paper-3);
}
.pay-receipt-table td:first-child{
  font-weight:600; color:var(--body); width:40%;
}
.pay-receipt-table td:last-child{
  color:var(--ink); font-family:var(--f-tech);
}

/* Payment Mode Tabs */
.pay-tab-toggle{
  display:flex; background:var(--paper-2); border:1.5px solid var(--line);
  border-radius:14px; padding:5px; margin-bottom:1.8rem; gap:6px;
}
.pay-tab-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.72rem .85rem; border-radius:10px; border:none;
  background:transparent; font-family:var(--f-body); font-size:clamp(.82rem, 2.4vw, .9rem);
  font-weight:600; color:var(--body); cursor:pointer; transition:all .18s var(--ease);
}
.pay-tab-btn:hover{
  color:var(--ink); background:rgba(255,255,255,.6);
}
.pay-tab-btn.active{
  background:#fff; color:var(--ink); box-shadow:0 3px 12px rgba(21,24,27,.09);
  border:1px solid rgba(0,0,0,.04);
}
.pay-tab-btn svg{
  color:var(--body); transition:color .18s var(--ease); flex-shrink:0;
}
.pay-tab-btn.active svg{
  color:var(--steel);
}

/* Static UPI QR View */
.pay-qr-box{
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.pay-qr-frame{
  width:100%; max-width:290px; background:#fff; border:1.5px solid var(--line);
  border-radius:16px; overflow:hidden; box-shadow:0 12px 30px -10px rgba(21,24,27,.12);
  margin-bottom:1.4rem; line-height:0;
}
.pay-qr-img{
  width:100%; height:auto; display:block;
}
.pay-qr-steps{
  width:100%; text-align:left; background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; padding:1rem 1.15rem; margin-bottom:1.3rem;
  display:flex; flex-direction:column; gap:.7rem; font-size:.86rem; color:var(--body);
}
.pay-qr-step{
  display:flex; align-items:flex-start; gap:.75rem; line-height:1.45;
}
.pay-qr-step strong{
  color:var(--ink);
}
.pay-qr-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; background:var(--steel);
  color:#fff; font-size:.75rem; font-weight:700; flex-shrink:0; margin-top:1px;
}
.pay-qr-actions{
  display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; width:100%;
}
.pay-qr-actions .btn{
  flex:1 1 135px;
}
.pay-qr-footer-note{
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  margin-top:1.3rem; font-size:.82rem; color:var(--body); opacity:.85;
}