/* =========================================================================
   3s Vastu Construction — design system
   -------------------------------------------------------------------------
   The brief was "premium, and it must not look generated". Concretely that
   meant fixing four things, in order of how much each one gives back:

   1. TYPE. A system-font site reads as a draft no matter how good the copy
      is. A serif display (Fraunces) against a grotesk with proper numerals
      (Archivo) gives a 28-year-old engineering firm the weight it has
      earned. Fonts are preconnected and swap, so text paints immediately on
      a rural connection and merely re-renders when they land.
   2. RHYTHM. One spacing scale, one type scale, sections that breathe. Even
      whitespace is what separates a designed page from an assembled one.
   3. RESTRAINT. Hairline rules instead of drop shadows, one accent colour
      used sparingly, no emoji, no gradient anywhere. Deep teal and brass
      carry the whole site.
   4. DETAIL. Tabular numerals in the credential strip, editorial section
      numbers, considered hover and focus states, real optical alignment.

   Brand #143745 is the firm's own colour, kept and deepened.
   ========================================================================= */

:root{
  /* ---- colour ---- */
  --brand:#143745;
  --brand-deep:#0B2531;      /* dark sections, footer */
  --brand-ink:#08191F;       /* deepest — hero overlay */
  --brand-soft:#1E4E60;
  --accent:#C08A2E;          /* brass */
  --accent-bright:#D9A03F;
  --accent-deep:#8A5D0B;
  --ink:#0F1E24;
  --ink-soft:#33474F;
  --muted:#63757B;
  --line:#E2E5E1;
  --line-soft:#EDEFEA;
  --paper:#FCFBF8;
  --surface:#FFFFFF;
  --sand:#F3F0E8;
  --ok:#1B6E45;

  /* ---- type ---- */
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Archivo",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ---- scale ---- */
  --maxw:1180px;
  --pad:clamp(20px,5vw,44px);
  --sec:clamp(60px,8.5vw,120px);   /* vertical rhythm between sections */
  --r:4px;                          /* corner radius — small on purpose */
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);
  font-size:17px;line-height:1.65;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
a{color:var(--brand);text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ---------- headings ---------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.018em;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 42;
  text-wrap:balance;
}
h1{font-size:clamp(38px,6.2vw,68px)}
h2{font-size:clamp(29px,3.9vw,45px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.01em}

/* eyebrow: small, tracked, with a rule — the editorial tell */
.eyebrow,.sec-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--body);
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:18px;
}
.eyebrow::after,.sec-label::after{
  content:"";height:1px;flex:1;max-width:72px;background:currentColor;opacity:.35;
}
.hero .eyebrow{color:var(--accent-bright)}

.lede{
  font-size:clamp(17.5px,1.7vw,20.5px);line-height:1.62;
  color:var(--ink-soft);max-width:60ch;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;
  padding:12px 18px;z-index:100;border-radius:0 0 var(--r) 0;font-weight:600;
}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-head{
  background:rgba(252,251,248,.88);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.head-in{display:flex;align-items:center;gap:16px;padding-block:14px}

.logo{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none}
.logo .mk{
  width:40px;height:40px;border-radius:var(--r);flex:none;display:grid;place-items:center;
  background:var(--brand);color:var(--accent-bright);
  font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.03em;
}
.logo b{
  display:block;font-family:var(--display);font-size:18.5px;font-weight:600;
  letter-spacing:-.02em;line-height:1.15;
}
.logo span span,.logo>span>span{
  display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-top:1px;
}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{
  color:var(--ink-soft);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:9px 12px;border-radius:var(--r);transition:color .18s,background .18s;
}
.nav a:hover{color:var(--brand);background:var(--line-soft)}
.nav a[aria-current="page"]{color:var(--brand);font-weight:600}

/* Staff login: present but deliberately quiet — it is a door for the crew,
   not an invitation to every visitor. Outlined so it never competes with
   the Contact call to action. */
.nav a.login{
  margin-left:8px;border:1px solid var(--line);color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:7px;font-weight:600;
}
.nav a.login::before{
  content:"";width:13px;height:13px;flex:none;
  border:1.5px solid currentColor;border-radius:2px;
  border-top-color:transparent;transform:rotate(-45deg);opacity:.7;
}
.nav a.login:hover{border-color:var(--brand);color:var(--brand);background:transparent}

.nav a.cta{
  background:var(--brand);color:#fff;font-weight:600;padding-inline:18px;
  margin-left:6px;
}
.nav a.cta:hover{background:var(--brand-deep);color:#fff}

.navtoggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--line);
  border-radius:var(--r);padding:9px 14px;font-size:14px;font-weight:600;color:var(--ink);
}

@media (max-width:940px){
  .navtoggle{display:block}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:10px var(--pad) 18px;gap:2px;display:none;
    box-shadow:0 18px 40px -24px rgba(11,37,49,.35);
  }
  .nav.open{display:flex}
  .nav a{padding:13px 4px;border-bottom:1px solid var(--line-soft);border-radius:0}
  .nav a.login,.nav a.cta{
    margin:10px 0 0;justify-content:center;border-radius:var(--r);padding:13px;
  }
  .nav a.login{border:1px solid var(--line)}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 26px;border-radius:var(--r);text-decoration:none;
  font-weight:600;font-size:15.5px;letter-spacing:.005em;border:1px solid transparent;
  transition:transform .16s,background .18s,border-color .18s,color .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#211603;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.btn-ghost{background:transparent;color:#EAF1F2;border-color:rgba(234,241,242,.34)}
.btn-ghost:hover{border-color:#EAF1F2;background:rgba(255,255,255,.06)}
.btn-dark{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-dark:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(192,138,46,.16) 0%, transparent 58%),
    linear-gradient(168deg,var(--brand-ink) 0%,var(--brand) 62%,var(--brand-soft) 130%);
  color:#F2F6F6;
  padding-block:clamp(64px,11vw,132px);
  position:relative;overflow:hidden;
}
/* a faint drawing grid — engineering paper, not decoration for its own sake */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 70% 0%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 80% at 70% 0%,#000 10%,transparent 72%);
}
.hero .wrap{position:relative}
.hero h1{color:#fff;max-width:15ch}
.hero .lede{color:rgba(242,246,246,.8);margin-top:22px;max-width:56ch}

/* ---------- credential strip ---------- */
.creds{background:var(--brand-deep);color:#EAF1F2;border-top:1px solid rgba(255,255,255,.07)}
.creds ul{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.creds li{
  padding:30px 20px;text-align:center;
  border-left:1px solid rgba(255,255,255,.09);
}
.creds li:first-child{border-left:0}
.creds b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--accent-bright);
  letter-spacing:-.02em;
}
.creds span{
  display:block;margin-top:9px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(234,241,242,.62);font-weight:600;line-height:1.5;
}
@media (max-width:760px){
  .creds ul{grid-template-columns:repeat(2,1fr)}
  .creds li:nth-child(3){border-left:0}
  .creds li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.09)}
}

/* ---------- sections ---------- */
main section,.sec{padding-block:var(--sec)}
.alt{background:var(--sand)}
.sec-intro{max-width:60ch;margin-bottom:clamp(34px,4.5vw,54px)}
.sec-intro p{color:var(--ink-soft);margin-top:16px;font-size:17.5px}

/* ---------- grids ---------- */
.grid,.g2,.g3{display:grid;gap:clamp(16px,2.2vw,26px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);
  position:relative;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card:hover{
  border-color:#CBD3CE;transform:translateY(-2px);
  box-shadow:0 22px 44px -30px rgba(11,37,49,.4);
}
.card h3{margin-bottom:10px}
.card p{color:var(--ink-soft);font-size:16px}
.card .more,.card .r{
  display:inline-block;margin-top:16px;color:var(--brand);font-weight:600;
  font-size:14.5px;text-decoration:none;
}
.card .more:hover,.card .r:hover{color:var(--accent-deep)}
/* editorial numbering — 01, 02, 03 down the service cards */
.card .ic{
  display:block;font-family:var(--display);font-size:13px;font-weight:600;
  color:var(--accent);letter-spacing:.1em;margin-bottom:14px;
}

/* ---------- prose ---------- */
.prose{max-width:68ch}
.prose p,.prose li{color:var(--ink-soft);margin-top:16px}
.prose h2,.prose h3{margin-top:44px;color:var(--ink)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:22px}
.prose strong{color:var(--ink);font-weight:600}
.prose blockquote{
  border-left:2px solid var(--accent);padding-left:22px;margin-top:26px;
  font-family:var(--display);font-size:20px;line-height:1.5;color:var(--ink);
}

/* ---------- project shots / gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,2vw,22px)}
.shot{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface);
}
.shot img{width:100%;height:230px;object-fit:cover}
.shot .cap{padding:16px 18px;border-top:1px solid var(--line-soft)}
.shot .cap b{display:block;font-weight:600;font-size:15.5px}
.shot .cap span{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}

/* Placeholder for a photograph not yet supplied. It has to look DELIBERATE:
   a broken image or a grey box is the fastest way to look unfinished. */
.ph{
  height:230px;display:grid;place-items:center;
  background:
    repeating-linear-gradient(135deg,var(--sand) 0 12px,#EDE9DF 12px 24px);
  color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;
}

/* ---------- forms ---------- */
.field{margin-bottom:20px}
.field label,.field>b{
  display:block;font-size:13px;font-weight:600;letter-spacing:.03em;
  color:var(--ink);margin-bottom:7px;
}
.field .hint{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:-3px;margin-bottom:7px}
input,select,textarea{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  transition:border-color .18s,box-shadow .18s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,55,69,.09);
}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{
  border:1px solid var(--line);border-radius:var(--r);padding:11px 16px;cursor:pointer;
  font-size:14.5px;font-weight:500;background:var(--surface);transition:all .16s;margin:0;
}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label:has(input:checked){border-color:var(--brand);background:var(--brand);color:#fff;font-weight:600}
.seg label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---------- estimate result ---------- */
.est-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(22px,3vw,40px);align-items:start}
@media (max-width:860px){.est-grid{grid-template-columns:1fr}}
.result{
  background:var(--brand);color:#F2F6F6;border-radius:var(--r);
  padding:clamp(24px,3vw,32px);position:sticky;top:96px;
}
.result .big{
  font-family:var(--display);font-size:clamp(32px,4.4vw,44px);font-weight:600;
  color:#fff;line-height:1.05;letter-spacing:-.02em;margin-block:6px 4px;
}
.result .sub{color:rgba(242,246,246,.68);font-size:14px}
.breakdown{list-style:none;padding:0;margin-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.breakdown li{
  display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid rgba(255,255,255,.09);font-size:15px;
}
.breakdown li span:first-child{color:rgba(242,246,246,.74)}
.breakdown li b{font-weight:600}
.disclaim{font-size:13px;color:var(--muted);margin-top:18px;line-height:1.55}

/* ---------- notices ---------- */
.notice{
  background:var(--sand);border:1px solid #E3DDCC;border-left:3px solid var(--accent);
  border-radius:var(--r);padding:18px 22px;font-size:15.5px;color:var(--ink-soft);
}
.notice b{color:var(--ink)}

/* ---------- articles ---------- */
.arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,28px)}
.art{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;text-decoration:none;color:inherit;display:block;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.art:hover{border-color:#CBD3CE;transform:translateY(-2px);box-shadow:0 22px 44px -30px rgba(11,37,49,.4)}
.art .tag{
  display:inline-block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--accent-deep);margin-bottom:12px;
}
.art h3{margin-bottom:8px}
.art p{color:var(--ink-soft);font-size:15.5px}
.art .meta{display:block;margin-top:16px;font-size:13px;color:var(--muted)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(26px,4vw,54px);align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.infoblk{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}
.infoblk b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.infoblk a,.infoblk p{font-size:17px;color:var(--ink);text-decoration:none}
.infoblk a:hover{color:var(--brand)}
.wa{
  display:inline-flex;align-items:center;gap:9px;background:#1FAF5E;color:#fff;
  padding:14px 22px;border-radius:var(--r);text-decoration:none;font-weight:600;font-size:15.5px;
}
.wa:hover{background:#178C4A;color:#fff}

/* ---------- footer ---------- */
.site-foot{background:var(--brand-ink);color:#C9D6D9;padding-top:clamp(48px,6vw,76px)}
.foot-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;
  gap:clamp(24px,3vw,44px);padding-bottom:44px;
}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.site-foot h4{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(201,214,217,.55);
  font-weight:600;margin-bottom:16px;font-family:var(--body);
}
.site-foot a{color:#C9D6D9;text-decoration:none;font-size:15px;display:block;padding:5px 0}
.site-foot a:hover{color:var(--accent-bright)}
.site-foot .logo b{color:#fff}
.site-foot .logo{margin-bottom:14px}
.site-foot p{font-size:14.5px;color:rgba(201,214,217,.68);max-width:34ch}
.foot-base{
  border-top:1px solid rgba(255,255,255,.09);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  font-size:13.5px;color:rgba(201,214,217,.55);
}
.foot-base .rl{margin-left:auto;display:flex;gap:18px}
.foot-base a{display:inline;font-size:13.5px}

/* ---------- misc ---------- */
.brow{font-size:13px;color:var(--muted)}
hr{border:0;border-top:1px solid var(--line);margin-block:var(--sec)}
::selection{background:var(--accent);color:#211603}