/* ============================================================
   Serilingampally constituency site — two sections (Hero, Contact)
   Direction: "Serilingampally at dusk" — granite slate ink, one teal
   accent, hairline rules, photo duotone.
   Only the rules these two sections need; dead section styles removed.
   ============================================================ */

:root{
  /* ink & paper */
  --ink:        #12161a;   /* deep granite slate — hero/footer ground */
  --ink-2:      #1b2127;   /* raised dark surface */
  --ink-3:      #2a323a;   /* dark hairline */
  --paper:      #f5f3ef;   /* warm-neutral page */
  --paper-2:    #ebe7df;   /* tint band */
  --white:      #fffefb;

  /* the single accent — teal, from the Deccan sky */
  --teal:       #0d7d74;
  --teal-dk:    #0a5f58;
  --teal-lt:    #4fb3aa;

  /* text */
  --body:       #30383e;
  --body-dk:    #9aa6ad;
  --muted:      #5a6469;   /* 5.5:1 on paper — AA for small label text */
  --faint:      #8b8478;   /* 3.3:1 — the "required fields" note only */
  --rule:       #d8d3c9;
  --rule-dk:    rgba(255,255,255,.13);

  --serifless:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display:    "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --mono:       "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:86px; }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font:400 clamp(16px,1.02vw,17.5px)/1.68 var(--serifless);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--teal-dk); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--teal); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; top:0; left:0; z-index:99;
  background:var(--ink); color:var(--white); padding:12px 20px;
  font:600 14px/1 var(--serifless);
  transform:translateY(-120%); transition:transform .15s;
}
.skip:focus{ transform:none; }

:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:2px; }

/* ---------- headings ---------- */
.h2{
  font:800 clamp(30px,4.6vw,52px)/1.04 var(--display);
  letter-spacing:-.025em; color:var(--ink); margin:0 0 18px;
  text-wrap:balance;
}
.sechead{ max-width:66ch; margin-bottom:clamp(38px,5vw,64px); }
.sechead p{ margin:0; color:var(--muted); font-size:1.03em; }

.sec{ padding-block:clamp(70px,9vw,132px); }

.cap, figcaption{
  font:400 12.5px/1.55 var(--mono);
  color:var(--muted); margin-top:12px; letter-spacing:.005em;
}
.note{ font-size:.92em; color:var(--muted); margin:14px 0 0; }

/* ============================================================
   NAV
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(18,22,26,.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-dk);
}
.topbar__in{
  display:flex; align-items:center; gap:20px;
  min-height:66px;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--white); text-decoration:none; }
.brand__mark{ color:var(--teal-lt); flex:0 0 auto; display:grid; place-items:center; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.24; }
.brand__txt strong{
  font:700 16.5px/1.2 var(--display); letter-spacing:-.01em; color:var(--white);
}
.brand__txt span{
  font:400 10.5px/1.4 var(--mono); letter-spacing:.055em;
  text-transform:uppercase; color:#8d99a0;
}
.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav a{
  color:#c8d2d7; text-decoration:none;
  font:500 14.5px/1 var(--serifless);
  padding:9px 0; border-bottom:1.5px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover{ color:var(--white); border-bottom-color:var(--teal-lt); }

.burger{
  display:none; margin-left:auto; width:44px; height:40px;
  background:none; border:1px solid var(--rule-dk); border-radius:3px;
  cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:11px; width:22px; height:2px; background:var(--white);
  transition:transform .22s ease, opacity .18s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:23px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* ============================================================
   1. HERO
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  background:var(--ink); color:var(--white);
  padding-block:clamp(46px,6vw,84px) 0;
  overflow:hidden;
}
/* text left, photograph right — the name leads, the portrait supports */
.hero__in{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,5vw,72px); align-items:center;
  padding-bottom:clamp(44px,6vw,76px);
}
.hero__photo{ order:2; justify-self:end; }
.hero__photo img{
  width:clamp(240px,30vw,380px); height:auto;
  border:1px solid var(--rule-dk); border-radius:2px;
  display:block;
}
.hero__name{
  font:800 clamp(44px,8vw,110px)/.9 var(--display);
  letter-spacing:-.04em; margin:0 0 22px; color:var(--white);
}
.hero__first{ display:block; color:#e7ebed; }
.hero__last{ display:block; color:var(--white); }
.hero__last::after{
  content:""; display:block; width:clamp(70px,12vw,180px); height:5px;
  background:var(--teal); margin-top:clamp(14px,2vw,22px);
}
.hero__role{
  font:500 clamp(16px,1.6vw,21px)/1.55 var(--serifless);
  color:#cfd8dc; margin:0; max-width:34ch;
}
.hero__role strong{ color:var(--white); font-weight:600; }

/* faint texture wash: a real photo of the seat's office district,
   kept low-contrast so it reads as grain, not a competing image */
.hero__tex{ position:absolute; inset:0; margin:0; z-index:-2; }
.hero__tex img{
  width:100%; height:100%; object-fit:cover;
  opacity:.14; filter:grayscale(.75) contrast(1.15) brightness(.7);
}
.hero::after{
  /* duotone wash toward the granite/teal palette */
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(105% 78% at 12% 0%, rgba(13,125,116,.32), transparent 60%),
    linear-gradient(176deg, rgba(18,22,26,.66) 0%, rgba(18,22,26,.92) 54%, var(--ink) 90%);
}

/* the skyline panorama keeps its own 11:1 aspect and fades into the ink,
   so the photo is actually legible instead of being cropped to nothing */
.hero__pan{
  position:relative; z-index:1;
  border-top:1px solid var(--rule-dk);
  background:var(--ink);
  max-height:170px; overflow:hidden;
}
.hero__pan img{
  width:100%; height:auto; display:block;
  filter:grayscale(.4) contrast(1.06) brightness(.9);
}
.hero__pan::before{
  content:""; position:absolute; left:0; right:0; top:0; height:70px; z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, var(--ink), rgba(18,22,26,0));
}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:600 15px/1 var(--serifless); text-decoration:none;
  padding:15px 26px; border-radius:2px; border:1.5px solid transparent;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn--solid{ background:var(--teal); color:var(--white); }
.btn--solid:hover{ background:var(--teal-dk); color:var(--white); transform:translateY(-1px); }
.btn--full{ width:100%; justify-content:center; }

/* ============================================================
   CONTACT US
   ============================================================ */
.contact__head{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:8px 24px;
  margin-bottom:clamp(26px,3.2vw,40px);
  padding-bottom:16px; border-bottom:2px solid var(--ink);
}
.contact__head .h2{ margin:0; }
.contact__hint{
  margin:0; font:400 11px/1.4 var(--mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
}

.cform{
  max-width:960px;
  background:var(--white); padding:clamp(24px,3.2vw,42px);
  border:1px solid var(--rule); border-radius:2px;
}
/* name / phone / email share one row; message spans the full width */
.cform__row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.fld{ display:block; margin-bottom:20px; }
.fld label{
  display:block; margin-bottom:7px;
  font:500 11px/1.4 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.req{ color:var(--teal); }
/* friendly touch targets — 16px+ inputs, generous tap heights */
.fld input, .fld textarea{
  width:100%; padding:14px 15px;
  font:400 16px/1.5 var(--serifless); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule); border-radius:2px;
  transition:border-color .16s, background .16s;
}
/* 16px avoids iOS Safari's zoom-on-focus */
.fld textarea{ resize:vertical; min-height:170px; }
.fld input:focus, .fld textarea:focus{
  border-color:var(--teal); background:var(--white); outline:none;
  box-shadow:0 0 0 3px rgba(13,125,116,.14);
}
.fld--full{ margin-bottom:8px; }
.fld.err input, .fld.err textarea{ border-color:#b4442f; background:#fdf3f1; }

/* consent sits in its own tinted band, so it reads as a permission
   step rather than another form field */
.cform__consent{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  margin:0 calc(-1 * clamp(24px,3.2vw,42px)) 22px;
  padding:18px clamp(24px,3.2vw,42px);
}
.consent{
  display:flex; gap:11px; align-items:flex-start;
  margin:0; font-size:13.5px; line-height:1.6; color:var(--ink-2); cursor:pointer;
}
.consent input{
  width:17px; height:17px; margin:3px 0 0; flex:0 0 auto; accent-color:var(--teal); cursor:pointer;
}
.consent a{ color:var(--teal-dk); }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font:600 15px/1 var(--serifless); text-decoration:none;
  padding:16px 26px; border-radius:2px; border:1.5px solid transparent;
  cursor:pointer; transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.btn--solid{ background:var(--teal); color:var(--white); }
.btn--solid:hover{ background:var(--teal-dk); color:var(--white); transform:translateY(-1px); }
.btn--full{ width:100%; justify-content:center; }

.formmsg{ margin:16px 0 0; font-size:14px; min-height:1.3em; }
.formmsg.ok{ color:var(--teal-dk); font-weight:600; }
.formmsg.err{ color:#a63a26; font-weight:600; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:#9ba7ad; padding-block:clamp(46px,5vw,66px) 0; }
.foot__in{
  display:grid; grid-template-columns:1fr auto auto;
  gap:28px clamp(28px,4vw,60px);
  padding-bottom:34px; border-bottom:1px solid var(--rule-dk);
}
.foot__brand{ display:flex; flex-direction:column; gap:6px; }
.foot__brand strong{
  font:700 21px/1.2 var(--display); letter-spacing:-.015em; color:var(--white);
}
.foot__brand span{ font:400 13px/1.5 var(--serifless); color:#8d99a0; }
.foot__brand .foot__dist{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* office address — its own column, marked up as a real <address> */
.foot__addrlabel{
  margin:0 0 10px; font:500 10.5px/1.4 var(--mono);
  letter-spacing:.13em; text-transform:uppercase; color:var(--teal-lt);
}
.foot__addr address{
  font:400 13.5px/1.7 var(--serifless); font-style:normal;
  color:#c8d2d7; max-width:32ch;
}
.foot__map{
  display:inline-block; margin-top:9px;
  font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-lt); text-decoration:none;
  border-bottom:1px solid rgba(79,179,170,.4); padding-bottom:3px;
}
.foot__map:hover{ color:#7fd0c7; border-bottom-color:#7fd0c7; }

.foot__nav{ display:flex; flex-wrap:wrap; gap:9px 24px; align-content:start; max-width:200px; }
.foot__nav a{
  color:#b8c2c8; text-decoration:none; font-size:13.5px; padding:3px 0;
  border-bottom:1px solid transparent; transition:color .16s, border-color .16s;
}
.foot__nav a:hover{ color:var(--white); border-bottom-color:var(--teal-lt); }

.foot__fine{ padding-block:22px 30px; }
.foot__fine p{ margin:0; font-size:12px; line-height:1.6; color:#6f7a81; max-width:78ch; }

/* ============================================================
   LEGAL PAGES  (privacy.html, terms.html, credits.html)
   ============================================================ */
.legal{ padding-block:clamp(90px,10vw,140px) clamp(60px,7vw,90px); }
.legal .wrap{ max-width:840px; }
.legal h1{
  font:800 clamp(32px,4.6vw,50px)/1.06 var(--display);
  letter-spacing:-.028em; color:var(--ink); margin:0 0 12px;
}
.legal .stamp{
  font:500 11.5px/1.5 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); margin:0 0 40px; padding-bottom:24px; border-bottom:2px solid var(--ink);
}
.legal h2{
  font:600 22px/1.3 var(--display); letter-spacing:-.015em; color:var(--ink);
  margin:42px 0 12px;
}
.legal p, .legal li{ max-width:70ch; font-size:15.5px; line-height:1.7; color:var(--body); }
.legal ul{ padding-left:22px; margin:0 0 18px; }
.legal li{ margin-bottom:8px; }
.legal a{ color:var(--teal-dk); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:66px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(18,22,26,.985);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--rule-dk);
    padding:6px var(--gut) 18px;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 0; font-size:16px; border-bottom:1px solid var(--rule-dk); }
  /* three columns get cramped — drop the address to its own full-width row */
  .foot__in{ grid-template-columns:1fr auto; }
  .foot__addr{ grid-column:1/-1; }
  .foot__addr address{ max-width:none; }
  .foot__nav{ max-width:none; }
  /* three-across is too tight here — go two, then one */
  .cform__row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================
   MOBILE-FIRST FRIENDLY LAYOUT
   ============================================================ */
@media (max-width: 620px){
  .hero__in{
    grid-template-columns:1fr; gap:24px; align-items:start;
    padding-bottom:36px;
  }
  /* on a phone the photograph reads as the masthead, so it comes first */
  .hero__photo{ order:1; justify-self:start; }
  .hero__photo img{ width:min(220px,52vw); }
  .hero__text{ order:2; }
  .hero__name{ font-size:clamp(38px,11vw,56px); letter-spacing:-.035em; margin-bottom:16px; }
  .hero__role{ font-size:16px; max-width:none; }
  .hero__pan{ max-height:96px; }

  .sec{ padding-block:clamp(46px,11vw,64px); }
  .contact__head{
    align-items:flex-start; flex-direction:column; gap:6px;
    margin-bottom:20px; padding-bottom:12px;
  }
  .contact__head .h2{ font-size:clamp(28px,8vw,36px); }
  .cform{ padding:20px 16px; border-radius:4px; }
  /* one field per row, full width — the easiest form to fill on a phone */
  .cform__row{ grid-template-columns:1fr; gap:0; }
  .fld{ margin-bottom:18px; }
  .fld input, .fld textarea{ padding:14px 14px; }
  .fld textarea{ min-height:150px; }
  .cform__consent{
    margin:0 -16px 18px; padding:16px;
  }
  .consent{ font-size:14px; }
  .btn{ padding:15px 20px; font-size:16px; }

  .foot__nav{ gap:8px 18px; }
  .foot__brand strong{ font-size:19px; }
  /* phone: stack everything, address sits under the identity block */
  .foot__in{ grid-template-columns:1fr; gap:24px; }
  .foot__addr{ grid-column:auto; padding-top:20px; border-top:1px solid var(--rule-dk); }
  .foot__addr address{ font-size:14px; line-height:1.75; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

@media print{
  .topbar, .cform, .foot__nav{ display:none!important; }
  body{ background:#fff; color:#000; }
  .hero{ background:#fff; color:#000; padding-top:0; }
  .hero::after, .hero__tex, .hero__pan{ display:none; }
  .hero__first, .hero__last, .hero__role strong{ color:#000; }
}
}