/* ==========================================================================
   ssarwar.com — Sohail Sarwar
   Design language recovered from the original site:
   black ground, large condensed white type, gold accent, white statement cards.
   ========================================================================== */

:root{
  --bg:        #0b0b0c;
  --bg-2:      #121214;
  --bg-3:      #17171a;
  --card:      #f6f4ef;
  --card-ink:  #1a1a1a;
  --gold:      #c9a24a;
  --gold-soft: #e0c483;
  --text:      #e9e8e4;
  --muted:     #9c9c98;
  --line:      #26262a;

  --ff-head: "Oswald", "Arial Narrow", Impact, sans-serif;
  --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-script: "Great Vibes", "Brush Script MT", cursive;

  --wrap: 1180px;
  --gut: 24px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
p{ margin:0 0 1em; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#000; padding:12px 18px; font-weight:700;
}
.skip-link:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- Typography ---------- */
h1,h2,h3,h4,.h-cond{
  font-family:var(--ff-head);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.05;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.4rem, 6vw, 4.4rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); }
h4{ font-size:1rem; letter-spacing:.08em; }
.lede{ font-size:1.075rem; color:#d5d4cf; max-width:62ch; }
.muted{ color:var(--muted); }
.gold{ color:var(--gold); }
.eyebrow{
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; color:var(--gold); margin:0 0 1rem;
}
.section-title{
  text-align:center; letter-spacing:.12em;
  font-size:clamp(1.1rem,2.2vw,1.4rem); margin:0 0 2.25rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--ff-head); text-transform:uppercase;
  letter-spacing:.1em; font-size:.85rem; font-weight:500;
  padding:14px 26px; border:1px solid var(--gold); color:var(--text);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ background:var(--gold); color:#000; }
.btn-gold{ background:var(--gold); color:#000; font-weight:600; }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-ghost{ border-color:#4a4a4f; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,11,12,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:74px;
}
.brand{ display:block; line-height:1.1; }
.brand-name{
  display:block; font-family:var(--ff-script); font-size:1.9rem; color:#fff;
}
.brand-tag{
  display:block; font-family:var(--ff-head); text-transform:uppercase;
  letter-spacing:.16em; font-size:.56rem; color:var(--muted); margin-top:2px;
}
.primary-nav{ display:flex; flex-wrap:wrap; gap:22px; }
.primary-nav a{
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.1em;
  font-size:.76rem; color:#cfcec9; padding:6px 0;
  border-bottom:2px solid transparent;
}
.primary-nav a:hover{ color:#fff; }
.primary-nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--gold); }

.nav-toggle{
  display:none; width:44px; height:38px; background:none; border:1px solid var(--line);
  cursor:pointer; padding:9px 10px;
}
.nav-toggle span{ display:block; height:2px; background:var(--text); margin:4px 0; }

@media (max-width:940px){
  .nav-toggle{ display:block; }
  .primary-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;
  }
  .primary-nav.is-open{ display:flex; }
  .primary-nav a{ padding:13px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
  .primary-nav a[aria-current="page"]{ border-bottom-color:var(--line); color:var(--gold); }
}

/* ---------- Sections ---------- */
.section{ padding:clamp(3rem,7vw,5.5rem) 0; }
.section--alt{ background:var(--bg-2); }
.section--tight{ padding:clamp(2rem,4vw,3rem) 0; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:end; gap:clamp(1rem,4vw,3rem);
  min-height:clamp(430px,62vh,620px);
}
.hero-copy{ padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,5rem); }
.hero h1{ margin-bottom:.35em; }
.hero-sub{
  font-family:var(--ff-head); text-transform:uppercase; color:var(--gold);
  letter-spacing:.03em; font-size:clamp(1rem,1.7vw,1.25rem);
  line-height:1.3; margin:0 0 1.4rem; max-width:32ch;
}
.hero-figure{ align-self:end; }
.hero-figure img{
  width:100%; max-height:640px; object-fit:cover; object-position:top center;
  /* The studio backdrop is a dark grey rectangle; fade its lower edge so the
     portrait sits in the black ground rather than on top of it. */
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.55) 90%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 72%,rgba(0,0,0,.55) 90%,transparent 100%);
}
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; align-items:start; }
  .hero-figure{ order:-1; margin:0 calc(var(--gut) * -1); }
  .hero-figure img{ max-height:420px; }
  .hero-copy{ padding-top:2rem; }
}

/* ---------- Proactive band (portrait + statement card) ---------- */
.band-proactive{ background:var(--bg-2); border-bottom:1px solid var(--line); }
.proactive-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(1.5rem,3vw,2.75rem); align-items:center;
}
.proactive-grid figure{ margin:0; }
.proactive-grid figure img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
@media (max-width:860px){
  .proactive-grid{ grid-template-columns:1fr; }
}

.quote-card{
  background:var(--card); color:var(--card-ink);
  padding:clamp(1.5rem,3vw,2.25rem); position:relative;
}
.quote-card .mark{
  font-family:Georgia,serif; font-size:3.4rem; line-height:.6; color:var(--gold);
  display:block; margin-bottom:.35em;
}
.quote-card blockquote{
  margin:0; font-size:1.05rem; font-style:italic; line-height:1.55; text-align:center;
}
.quote-card cite{
  display:block; margin-top:1rem; text-align:center; font-style:normal;
  color:#8a6d24; font-weight:600; font-size:.9rem;
}

/* ---------- Pillars ---------- */
.pillars{
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pillar{
  padding:clamp(1.5rem,3vw,2.25rem) 18px; text-align:center;
  border-right:1px solid var(--line);
}
.pillar:last-child{ border-right:0; }
.pillar svg{ width:40px; height:40px; margin:0 auto .9rem; stroke:var(--gold); fill:none; stroke-width:1.4; }
.pillar h3{ font-size:.92rem; letter-spacing:.14em; margin-bottom:.6em; }
.pillar p{ font-size:.85rem; color:var(--muted); margin:0; }
@media (max-width:940px){
  .pillars{ grid-template-columns:repeat(2,1fr); }
  .pillar{ border-bottom:1px solid var(--line); }
  .pillar:nth-child(2n){ border-right:0; }
  .pillar:last-child{ grid-column:1 / -1; border-right:0; border-bottom:0; }
}

/* ---------- Journey timeline ---------- */
.journey{ background:var(--bg-2); }
.journey-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(112px,1fr);
  gap:6px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin;
}
.journey-stop{ text-align:center; }
.journey-logo{
  height:56px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; padding:0 6px;
}
.journey-logo img{ max-height:44px; width:auto; object-fit:contain; }
.journey-stop .dot{
  position:relative; height:22px;
  display:flex; align-items:center; justify-content:center;
}
.journey-stop .dot::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--gold); opacity:.45;
}
.journey-stop:first-child .dot::before{ left:50%; }
.journey-stop:last-child .dot::before{ right:50%; }
.journey-stop .dot i{
  width:9px; height:9px; border-radius:50%; background:var(--gold);
  position:relative; z-index:1;
}
.journey-stop .label{
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.06em;
  font-size:.72rem; color:#c8c7c2; margin-top:10px; line-height:1.25;
}
.journey-stop .years{ display:block; font-size:.66rem; color:var(--muted); letter-spacing:.08em; }

/* ---------- Card grids ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:940px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--bg-3); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
}
.card-media{ position:relative; }
.card-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.card-body{ padding:16px 18px 20px; }
.card-body h3{ font-size:.95rem; letter-spacing:.08em; margin-bottom:.55em; }
.card-body p{ font-size:.86rem; color:var(--muted); margin:0; }
.card-link{
  display:inline-block; margin-top:1rem; font-family:var(--ff-head);
  text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--gold);
}
.card-link:hover{ color:var(--gold-soft); }
a.card:hover{ border-color:var(--gold); }

/* Feature panel: media + copy side by side, alternating */
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem);
  align-items:center; padding:clamp(2rem,4vw,3rem) 0;
  border-bottom:1px solid var(--line);
}
.feature:last-of-type{ border-bottom:0; }
.feature img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.feature--flip .feature-media{ order:2; }
@media (max-width:860px){
  .feature{ grid-template-columns:1fr; }
  .feature--flip .feature-media{ order:0; }
}

/* ---------- Homepage trio (testimonial / cert / article) ---------- */
.trio{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px; align-items:start; }
@media (max-width:940px){ .trio{ grid-template-columns:1fr; } }
.panel{ border:1px solid var(--line); background:var(--bg-3); padding:22px; height:100%; }
.panel > h4{ letter-spacing:.16em; color:#cfcec9; margin-bottom:1.1rem; }
.panel-quote{ font-style:italic; font-size:.92rem; color:#dcdbd6; }
.byline{ display:flex; align-items:center; gap:12px; margin-top:1.1rem; }
.byline img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.byline b{ display:block; font-size:.9rem; }
.byline span{ font-size:.78rem; color:var(--muted); }
.cert-frame{ background:#fff; padding:10px; }
.cert-frame img{ width:100%; }
.panel figcaption{
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.1em;
  font-size:.68rem; color:var(--muted); text-align:center; margin-top:12px;
}

/* ---------- Beyond work strip ---------- */
.strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; }
.strip img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:saturate(.95); }
@media (max-width:640px){ .strip{ grid-template-columns:repeat(2,1fr); } }
.strip-tag{
  text-align:center; margin-top:16px; color:var(--gold);
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
}

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr; } }
.stat{ border-left:2px solid var(--gold); padding:6px 0 6px 18px; }
.stat b{
  display:block; font-family:var(--ff-head); font-size:clamp(2rem,4vw,2.9rem);
  line-height:1; color:#fff;
}
.stat span{ font-size:.85rem; color:var(--muted); }

/* ---------- Story / chapter timeline ---------- */
.chapters{ border-left:1px solid var(--line); margin-left:8px; padding-left:0; list-style:none; }
.chapter{ position:relative; padding:0 0 clamp(2rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem); }
.chapter::before{
  content:""; position:absolute; left:-5px; top:10px;
  width:9px; height:9px; border-radius:50%; background:var(--gold);
}
.chapter .years{
  font-family:var(--ff-head); letter-spacing:.16em; font-size:.72rem; color:var(--gold);
  text-transform:uppercase;
}
.chapter h3{ margin:.4em 0 .5em; }
.chapter .role{ color:var(--muted); font-size:.85rem; margin:-.3em 0 1em; }
.chapter figure{ margin:1.4rem 0 0; }
.chapter figure img{ width:100%; max-width:520px; }
.chapter figcaption{ font-size:.76rem; color:var(--muted); margin-top:8px; }

/* ---------- Lists ---------- */
.ticks{ list-style:none; padding:0; margin:0 0 1.5rem; }
.ticks li{ position:relative; padding-left:26px; margin-bottom:.6em; color:#d5d4cf; }
.ticks li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:8px; height:8px; border:1px solid var(--gold); transform:rotate(45deg);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line); background:var(--bg-2);
}
.page-hero h1{ font-size:clamp(2rem,5vw,3.4rem); margin-bottom:.4em; }

/* Article headlines read as prose, not as condensed display caps. */
.article-title{
  text-transform:none; letter-spacing:0;
  font-family:var(--ff-body); font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.75rem); line-height:1.25;
}

/* ---------- Articles ---------- */
.article-grid{ align-items:stretch; }
.article-card .card-body{ display:flex; flex-direction:column; height:100%; }
.article-card .article-title{
  font-size:1.02rem; line-height:1.3; margin:0 0 .6em; color:#f0efeb;
}
.article-card p{ flex:1 0 auto; }
.article-card .eyebrow{ margin-bottom:.7rem; font-size:.68rem; }
.article-card .card-link{ margin-top:1.1rem; }
.feature .article-title a{ color:inherit; }
.feature .article-title a:hover{ color:var(--gold); }

/* ---------- Certifications ---------- */
.cert-groups{ display:grid; gap:clamp(2rem,4vw,3.25rem); }
.cert-group > h2{ margin-bottom:.3em; }
.cert-note{ margin:0 0 1.5rem; font-size:.92rem; }
.cert-list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.cert-item{ background:var(--bg-3); padding:16px 18px; }
/* Issuer mark: a neutral wordmark, replaced by a real badge image when one exists. */
.cert-mark{
  height:38px; width:auto; margin:0 0 12px -4px; opacity:.9;
}
.cert-badge{ height:64px; width:auto; margin:0 0 12px; }
.cert-item.is-expired .cert-mark,
.cert-item.is-expired .cert-badge{ opacity:.45; }
.cert-name{
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.04em;
  font-size:.94rem; line-height:1.25; color:#f0efeb; margin-bottom:.35em;
}
.cert-issuer{ font-size:.85rem; color:var(--gold); margin-bottom:.3em; }
.cert-meta{ font-size:.76rem; color:var(--muted); letter-spacing:.02em; }
.cert-item.is-expired .cert-name{ color:#a9a8a3; }
.cert-item.is-expired .cert-issuer{ color:#8a7440; }

/* ---------- Testimonials ---------- */
.quote-rotator{
  position:relative; max-width:860px; margin:0 auto; text-align:center;
  padding:clamp(1.5rem,4vw,2.5rem) 0;
}
.quote-rotator > .mark{
  font-family:Georgia,serif; font-size:4rem; line-height:.5; color:var(--gold);
  display:block; margin-bottom:1.2rem;
}
/* Reserve the tallest slide's height so the controls do not jump on rotate. */
.quote-stage{ display:grid; }
.quote-stage > .quote-slide{ grid-area:1 / 1; margin:0; }
.quote-slide[hidden]{ display:none; }
.quote-slide blockquote{
  margin:0 0 1.6rem; font-size:clamp(1.02rem,1.9vw,1.3rem); line-height:1.6;
  font-style:italic; color:#e6e5e0;
}
.quote-slide figcaption b{
  display:block; font-family:var(--ff-head); text-transform:uppercase;
  letter-spacing:.1em; font-size:.92rem; color:#fff;
}
.quote-slide figcaption span{
  display:block; font-size:.84rem; color:var(--muted); margin-top:3px;
}
.quote-rel{ color:var(--gold) !important; font-size:.75rem !important; letter-spacing:.04em; }

.quote-controls{
  display:flex; align-items:center; justify-content:center; gap:18px; margin-top:2rem;
}
.quote-arrow{
  background:none; border:1px solid var(--line); color:var(--text);
  width:38px; height:38px; font-size:1.3rem; line-height:1; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.quote-arrow:hover{ border-color:var(--gold); color:var(--gold); }
.quote-dots{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:260px; }
.quote-dot{
  width:8px; height:8px; padding:0; border-radius:50%; cursor:pointer;
  background:#3a3a40; border:0; transition:background .2s ease, transform .2s ease;
}
.quote-dot:hover{ background:#5c5c63; }
.quote-dot.is-on{ background:var(--gold); transform:scale(1.25); }

.tgroups{ display:grid; gap:clamp(2rem,4vw,3.25rem); }
.tgroup > h2{ display:flex; align-items:baseline; gap:12px; margin-bottom:1.4rem; }
.tcount{
  font-family:var(--ff-body); font-size:.8rem; font-weight:500;
  color:var(--gold); letter-spacing:.04em;
}
.tgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.tcard{
  margin:0; background:var(--bg-3); border:1px solid var(--line);
  padding:20px 22px 22px; display:flex; flex-direction:column;
}
.tcard blockquote{
  margin:0 0 1.2rem; font-size:.9rem; line-height:1.6; color:#d3d2cd; flex:1 0 auto;
}
.tcard figcaption b{
  display:block; font-family:var(--ff-head); text-transform:uppercase;
  letter-spacing:.08em; font-size:.82rem; color:#f0efeb;
}
.tcard figcaption span{ display:block; font-size:.76rem; color:var(--muted); margin-top:3px; }

/* Homepage rotator sits inside the narrow trio panel. */
.panel .quote-rotator{ padding:0; text-align:left; }
.panel .quote-rotator > .mark{ font-size:2.4rem; margin-bottom:.6rem; }
.panel .quote-slide blockquote{ font-size:.92rem; margin-bottom:1.1rem; }
.panel .quote-controls{ justify-content:flex-start; gap:12px; margin-top:1.2rem; }
.panel .quote-arrow{ width:30px; height:30px; font-size:1.1rem; }

/* ---------- Issuer wall (stands in for certificate scans) ---------- */
.issuer-wall{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:1.2rem;
}
.issuer-wall img{
  width:100%; background:var(--bg-2); padding:14px 8px;
}
.issuer-wall--wide{
  grid-template-columns:repeat(5,1fr); margin-top:clamp(2rem,4vw,2.75rem);
}
@media (max-width:860px){ .issuer-wall--wide{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){
  .issuer-wall,.issuer-wall--wide{ grid-template-columns:repeat(2,1fr); }
}
.issuer-hero{ width:100%; max-width:220px; background:var(--bg-2); padding:20px 12px; border:1px solid var(--line); }
.cert-count{ display:flex; align-items:baseline; gap:10px; margin:0; }
.cert-count b{
  font-family:var(--ff-head); font-size:2.6rem; line-height:1; color:var(--gold);
}
.cert-count span{ font-size:.82rem; color:var(--muted); }

/* Beyond Work illustrations stand in until real photographs are added; they are
   drawn at the slot's aspect ratio so they crop like a photograph would. */
.strip img[src$=".svg"], .feature img[src$=".svg"]{ background:#111114; }
.card-media img[src$=".svg"]{ background:#141418; object-fit:contain; padding:22px; }
.cert-frame img[src$=".svg"], .feature-media .cert-frame img[src$=".svg"]{
  background:#141418; padding:26px 18px;
}
.chapter figure .cert-frame{ background:transparent; padding:0; border:1px solid var(--line); }

/* ---------- Video embeds ---------- */
.video-frame{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#000; border:1px solid var(--line);
}
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:var(--ff-head); text-transform:uppercase;
  letter-spacing:.12em; font-size:.72rem; color:#cfcec9; margin-bottom:8px;
}
.field input,.field textarea{
  width:100%; background:var(--bg-3); border:1px solid var(--line); color:var(--text);
  padding:12px 14px; font:inherit; font-size:.95rem;
}
.field input:focus,.field textarea:focus{ border-color:var(--gold); outline:none; }
.field textarea{ min-height:150px; resize:vertical; }
.contact-list{ list-style:none; padding:0; margin:0; }
.contact-list li{ padding:14px 0; border-bottom:1px solid var(--line); font-size:.95rem; }
.contact-list b{
  display:block; font-family:var(--ff-head); text-transform:uppercase;
  letter-spacing:.12em; font-size:.7rem; color:var(--muted); margin-bottom:4px;
}
.form-note{ font-size:.8rem; color:var(--muted); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-2); }
.footer-inner{
  display:flex; align-items:center; justify-content:center; gap:clamp(1rem,4vw,3rem);
  flex-wrap:wrap; padding:clamp(1.5rem,3vw,2.25rem) var(--gut);
}
.footer-cta{
  display:flex; align-items:center; gap:14px; margin:0;
  font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(.8rem,1.6vw,1rem);
}
.footer-cta svg{ width:26px; height:26px; stroke:var(--gold); fill:none; stroke-width:1.4; flex:none; }
.footer-meta{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  flex-wrap:wrap; padding:16px var(--gut) 28px; border-top:1px solid var(--line);
}
.footer-meta p{ margin:0; font-size:.78rem; color:var(--muted); }
.footer-meta nav{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-meta nav a{ font-size:.78rem; color:var(--muted); }
.footer-meta nav a:hover{ color:var(--gold); }

/* ---------- Image placeholder (until real photos are dropped in) ----------
   Applied by main.js when a photo has not been added yet. The <img> keeps all
   of its layout rules; only its content becomes a labelled dashed box.        */
img.img-missing{
  background:repeating-linear-gradient(45deg,#16161a 0 10px,#1b1b20 10px 20px);
  border:1px dashed #3a3a40;
  object-fit:contain !important;
  min-height:110px;
}
.cert-frame img.img-missing{ background:#e9e7e2; border-color:#c9c6bf; }
.byline img.img-missing{ border-radius:50%; min-height:0; }

@media print{
  .site-header,.site-footer,.btn-row{ display:none; }
  body{ background:#fff; color:#000; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}