/* =========================================================
   ÇETİNKAYA GLOBAL — Design System
   Subject: non-ferrous metals trading house, est. 1982.
   Palette is drawn from the metals the firm actually trades:
   copper, brass, aluminum, zinc, lead — set against a
   graphite/oxide dark ground with a warm paper foreground.
   ========================================================= */

:root{
  /* --- Ground --- */
  --graphite-950:#141210;
  --graphite-900:#1c1913;
  --graphite-800:#25211a;
  --graphite-700:#332d24;
  --hairline:rgba(239,234,224,0.10);
  --hairline-strong:rgba(239,234,224,0.18);

  /* --- Paper / text --- */
  --paper-050:#f8f5ee;
  --paper-100:#efeade;
  --paper-300:#cfc7b4;
  --paper-500:#a89e89;

  /* --- Metal spectrum (signature) --- */
  --m-copper:#b8703d;
  --m-copper-bright:#d68a52;
  --m-brass:#c9a15a;
  --m-aluminum:#a7ada9;
  --m-zinc:#83867f;
  --m-lead:#54534e;

  /* --- Type --- */
  --f-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --f-body:"Source Serif 4","Georgia",serif;
  --f-mono:"JetBrains Mono","Courier New",monospace;

  /* --- Scale / rhythm --- */
  --container:1180px;
  --gutter:clamp(20px,4vw,64px);
  --radius:2px;

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

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

body{
  margin:0;
  background:var(--graphite-950);
  color:var(--paper-100);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:0.98;
  margin:0 0 0.4em;
  color:var(--paper-050);
}

p{margin:0 0 1em;}

.eyebrow{
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--m-brass);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--m-brass);
  display:inline-block;
}

:focus-visible{
  outline:2px solid var(--m-brass);
  outline-offset:3px;
}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}

.section{
  padding:clamp(56px,9vw,120px) 0;
  position:relative;
}
.section--tight{padding:clamp(40px,6vw,72px) 0;}
.section-border-top{border-top:1px solid var(--hairline);}
.bg-panel{background:var(--graphite-900);}

/* ---------------------------------------------------------
   Metal spectrum strip — the signature element.
   A literal swatch of the metals the firm trades. Appears
   in the header, as a section divider, and in the footer,
   always in the same fixed order (heaviest metallurgical
   convention: light -> heavy).
   --------------------------------------------------------- */
.metal-strip{
  display:flex;
  width:100%;
  height:6px;
}
.metal-strip span{flex:1;}
.metal-strip .aluminum{background:var(--m-aluminum);}
.metal-strip .brass{background:var(--m-brass);}
.metal-strip .copper{background:var(--m-copper);}
.metal-strip .zinc{background:var(--m-zinc);}
.metal-strip .lead{background:var(--m-lead);}

.metal-legend{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper-500);
}
.metal-legend .dot{
  width:9px;height:9px;border-radius:50%;
  display:inline-block;margin-right:8px;
  vertical-align:middle;
}
.metal-legend .dot.aluminum{background:var(--m-aluminum);}
.metal-legend .dot.brass{background:var(--m-brass);}
.metal-legend .dot.copper{background:var(--m-copper);}
.metal-legend .dot.zinc{background:var(--m-zinc);}
.metal-legend .dot.lead{background:var(--m-lead);}

/* ---------------------------------------------------------
   Header / navigation
   --------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  /* Solid (not backdrop-filter) on purpose: backdrop-filter/filter on an
     ancestor turns it into a containing block for fixed descendants,
     which traps the mobile nav panel inside the header's own box and
     makes it render collapsed/transparent. Keep this element filter-free. */
  background:var(--graphite-950);
  border-bottom:1px solid var(--hairline);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px var(--gutter);
  max-width:var(--container);
  margin:0 auto;
}
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.brand-logo {
    height: 100px;
    width: auto;
    display: block;
    /* Loads fast and stays crisp on retina; swap the file at
     wwwroot/img/logo.png to update the mark site-wide. */
}

.footer-brand .brand-logo {
    height: 100px;
}

@media (max-width:480px) {
    .brand-logo {
        height: 32px;
    }
}

.brand span{
  color:var(--m-copper-bright);
}
.brand small{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.22em;
  color:var(--paper-500);
  text-transform:uppercase;
  font-weight:400;
}
.nav-links{
  display:flex;
  gap:clamp(14px,0vw,34px);
  list-style:none;
  margin:0;padding:0;
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.nav-links a{
  text-decoration:none;
  color:var(--paper-300);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  color:var(--paper-050);
  border-bottom-color:var(--m-copper);
}
.nav-toggle{
  display:none;
  background:none;border:1px solid var(--hairline-strong);
  color:var(--paper-050);
  width:40px;height:36px;
  border-radius:var(--radius);
  cursor:pointer;
}
.nav-toggle span{
  display:block;width:18px;height:1px;background:var(--paper-050);
  margin:4px auto;transition:transform .25s var(--ease), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

@media (max-width:860px){
  .nav-toggle{display:block;position:relative;z-index:61;}
  .nav-links{
    position:fixed;
    left:0;right:0;
    top:var(--header-h, 78px);
    bottom:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    background:var(--graphite-950);
    background-image:
      radial-gradient(ellipse 600px 300px at 100% 0%, rgba(184,112,61,0.10), transparent 60%);
    padding:8px var(--gutter) 32px;
    gap:0;
    overflow-y:auto;
    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
    font-size:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.4);
  }
  .nav-links.is-open{
    opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;
    transition:opacity .22s var(--ease), transform .22s var(--ease);
  }
  .nav-links li{border-bottom:1px solid var(--hairline);}
  .nav-links li:first-child{border-top:1px solid var(--hairline);}
  .nav-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:19px 2px;
    color:var(--paper-100);
  }
  .nav-links a::after{
    content:"→";
    color:var(--paper-500);
    transition:transform .2s var(--ease), color .2s var(--ease);
  }
  .nav-links a:hover::after,
  .nav-links a[aria-current="page"]::after{
    color:var(--m-copper-bright);
    transform:translateX(3px);
  }
  .nav-links a[aria-current="page"]{color:var(--m-brass);}

  body.nav-open{overflow:hidden;}
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative;
  padding:clamp(64px,11vw,140px) 0 clamp(48px,7vw,96px);
  overflow:hidden;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(184,112,61,0.16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(239,234,224,0.025) 0px, rgba(239,234,224,0.025) 1px, transparent 1px, transparent 68px),
    var(--graphite-950);
}
.hero-map {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1500px, 140%);
    height: auto;
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
    line-height: 0;
}

    .hero-map svg {
        width: 100%;
        height: auto;
        display: block;
        overflow: visible;
    }

    .hero-map #tr-provinces path {
        fill: var(--graphite-900);
        fill-opacity: 0.65;
        stroke: var(--hairline);
        stroke-width: 0.6;
        stroke-linejoin: round;
    }

    .hero-map #tr-outline {
        fill: none;
        stroke: var(--hairline-strong);
        stroke-width: 2;
        stroke-linejoin: round;
    }

    .hero-map #tr-outline-sweep {
        fill: none;
        stroke: url(#heroMapSweepGrad);
        stroke-width: 3.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-dasharray: 130 870;
        filter: drop-shadow(0 0 3px var(--m-brass)) drop-shadow(0 0 10px var(--m-copper));
        animation: heroMapSweep 9s linear infinite;
    }

@keyframes heroMapSweep {
    to {
        stroke-dashoffset: -1000;
    }
}

@media (max-width:900px) {
    .hero-map {
        opacity: 0.55;
        width: 220%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-map #tr-outline-sweep {
        animation: none;
        stroke-dasharray: none;
        opacity: 0.7;
    }
}

.hero .container {
    position: relative;
    z-index: 1;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:clamp(28px,5vw,64px);
  align-items:end;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
}
.hero h1{
  font-size:clamp(40px,6.4vw,88px);
  margin-bottom:0.28em;
}
.hero h1 em{
  font-style:normal;
  color:var(--m-copper-bright);
}
.hero-lede{
  font-family:var(--f-body);
  font-size:clamp(17px,1.6vw,20px);
  color:var(--paper-300);
  max-width:52ch;
}
.hero-figure{
  border-left:1px solid var(--hairline-strong);
  padding-left:clamp(18px,2.4vw,32px);
  font-family:var(--f-mono);
}
.hero-figure .num{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(48px,6vw,72px);
  color:var(--paper-050);
  line-height:1;
}
.hero-figure .label{
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--paper-500);
}

.cta-row{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:32px;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);
  font-size:12.5px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14px 24px;
  border-radius:var(--radius);
  border:1px solid var(--hairline-strong);
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--m-copper);
  border-color:var(--m-copper);
  color:var(--graphite-950);
  font-weight:600;
}
.btn-primary:hover{background:var(--m-copper-bright);border-color:var(--m-copper-bright);}
.btn-ghost{
  color:var(--paper-100);
  background:transparent;
}
.btn-ghost:hover{border-color:var(--m-brass);color:var(--m-brass);}
.btn-ghost::after{content:"→";transition:transform .2s var(--ease);}
.btn-ghost:hover::after{transform:translateX(3px);}

/* ---------------------------------------------------------
   Section headers
   --------------------------------------------------------- */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:clamp(32px,5vw,56px);
  border-bottom:1px solid var(--hairline);
  padding-bottom:22px;
}
.section-head h2{
  font-size:clamp(28px,3.6vw,46px);
  max-width:16ch;
}
.section-head .desc{
  max-width:42ch;
  color:var(--paper-300);
  font-size:15.5px;
  margin:0;
}

/* ---------------------------------------------------------
   Pillars / service cards (home)
   --------------------------------------------------------- */
.pillars {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

@media (max-width:1040px) {
    .pillars {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width:640px) {
    .pillars {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:420px) {
    .pillars {
        grid-template-columns: 1fr;
    }
}

.pillar{
  background:var(--graphite-950);
  padding:34px 28px;
  min-height:230px;
  display:flex;flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  position:relative;
  transition:background .25s var(--ease);
}
.pillar:hover{background:var(--graphite-900);}
.pillar .metal-dot{
  width:12px;height:12px;border-radius:50%;
  margin-bottom:22px;
}
.pillar h3{
  font-size:22px;
  color:var(--paper-050);
  margin-bottom:10px;
}
.pillar p{
  color:var(--paper-300);
  font-size:14.5px;
  margin-bottom:18px;
}
.pillar .go{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--m-brass);
  display:inline-flex;align-items:center;gap:8px;
}
.pillar .go::after{content:"→";transition:transform .2s var(--ease);}
.pillar:hover .go::after{transform:translateX(4px);}


/* ---------------------------------------------------------
   Four-generations teaser (home) — echoes the Tarihçe chapters
   --------------------------------------------------------- */
.generations-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

@media (max-width:920px) {
    .generations-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:520px) {
    .generations-grid {
        grid-template-columns: 1fr;
    }
}

.generation-card {
    background: var(--graphite-950);
    border-top: 2px solid var(--accent, var(--m-copper));
    padding: 26px 24px;
    text-decoration: none;
    display: block;
    transition: background .25s var(--ease), transform .25s var(--ease);
}

    .generation-card:hover {
        background: var(--graphite-900);
        transform: translateY(-3px);
    }

.generation-years {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent, var(--m-brass));
}

.generation-card h3 {
    font-size: 20px;
    margin: 10px 0 8px;
    color: var(--paper-050);
}

.generation-card p {
    color: var(--paper-300);
    font-size: 14px;
    margin: 0;
}

/* ---------------------------------------------------------
   About / company narrative
   --------------------------------------------------------- */
.about-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:clamp(32px,6vw,80px);
}
@media (max-width:880px){.about-grid{grid-template-columns:1fr;}}
.about-copy p{
  color:var(--paper-300);
  font-size:16.5px;
}
.about-copy p:first-of-type::first-letter{
  font-family:var(--f-display);
  font-size:3.2em;
  float:left;
  line-height:0.8;
  padding-right:10px;
  color:var(--m-copper-bright);
}
.stat-list{
  display:flex;flex-direction:column;
  border-top:1px solid var(--hairline);
}
.stat-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--hairline);
}
.stat-row .k{
  font-family:var(--f-display);
  font-size:clamp(26px,3vw,38px);
  color:var(--paper-050);
}
.stat-row .v{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--paper-500);
  text-align:right;
  max-width:22ch;
}

/* ---------------------------------------------------------
   Process timeline (Acentelik / Partnerlik) — a true sequence,
   so numbering is earned here rather than decorative.
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   Process sequence (Acentelik / Partnerlik) — a true ordered
   sequence, so numbering + a spine are earned here. Alternates
   left/right of a central spine on wide screens; each step is
   tinted with one metal from the spectrum, echoing the header
   strip and tying the process back to the firm's material.
   --------------------------------------------------------- */
.process{
  position:relative;
  max-width:920px;
  margin:0 auto;
  counter-reset:step;
}
.process::before{
  content:"";
  position:absolute;
  left:50%;
  top:6px;
  bottom:6px;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(
    to bottom,
    var(--m-aluminum), var(--m-brass), var(--m-copper), var(--m-zinc), var(--m-lead)
  );
  opacity:0.5;
}
.process-step{
  position:relative;
  display:grid;
  grid-template-columns:1fr 64px 1fr;
  align-items:start;
  margin-bottom:clamp(36px,6vw,64px);
}
.process-step:last-child{margin-bottom:0;}

.process-marker{
  grid-column:2;
  justify-self:center;
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--graphite-950);
  border:2px solid var(--accent, var(--m-copper));
  box-shadow:0 0 0 6px var(--graphite-950);
  font-family:var(--f-display);
  font-size:19px;
  color:var(--paper-050);
  z-index:1;
}

.process-card{
  background:var(--graphite-900);
  border:1px solid var(--hairline);
  border-top:2px solid var(--accent, var(--m-copper));
  padding:26px 28px;
  transition:transform .25s var(--ease), border-color .25s var(--ease);
}
.process-card:hover{transform:translateY(-3px);}
.process-card .tl-num{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--accent, var(--m-brass));
  display:block;
  margin-bottom:8px;
}
.process-card h3{
  font-size:21px;
  margin-bottom:8px;
  color:var(--paper-050);
}
.process-card p{
  color:var(--paper-300);
  font-size:15px;
  margin:0;
}

/* Alternate sides on wide screens */
.process-step:nth-child(odd) .process-card{grid-column:1;text-align:right;}
.process-step:nth-child(odd) .process-card .tl-num{justify-content:flex-end;}
.process-step:nth-child(even) .process-card{grid-column:3;text-align:left;}

@media (max-width:760px){
  .process::before{left:25px;}
  .process-step{
    grid-template-columns:50px 1fr;
    margin-bottom:34px;
  }
  .process-marker{
    grid-column:1;
    width:44px;height:44px;
    font-size:16px;
    box-shadow:0 0 0 4px var(--graphite-950);
  }
  .process-step:nth-child(odd) .process-card,
  .process-step:nth-child(even) .process-card{
    grid-column:2;
    text-align:left;
  }
  .process-step:nth-child(odd) .process-card .tl-num{justify-content:flex-start;}
  .process-card{padding:20px 20px;}
}

/* ---------------------------------------------------------
   Generic content / service & product grids
   --------------------------------------------------------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
@media (max-width:920px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.card-grid{grid-template-columns:1fr;}}

.card{
  border:1px solid var(--hairline);
  padding:28px;
  background:var(--graphite-900);
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover{border-color:var(--hairline-strong);transform:translateY(-3px);}
.card .tag{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--m-brass);
}
.card h3{
  font-size:20px;
  margin:12px 0 10px;
  color:var(--paper-050);
}
.card p{
  color:var(--paper-300);
  font-size:14.5px;
  margin:0;
}

.product-card{
  border:1px solid var(--hairline);
  background:var(--graphite-900);
  overflow:hidden;
}
.product-swatch{
  height:150px;
  position:relative;
}
.product-swatch::after{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(100deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 26px);
}
.product-body{padding:20px 22px 24px;}
.product-body .tag{
  font-family:var(--f-mono);
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--paper-500);
}
.product-body h3{
  font-size:19px;margin:8px 0 6px;color:var(--paper-050);
}
.product-body p{color:var(--paper-300);font-size:14px;margin:0;}

.swatch-copper{background:linear-gradient(135deg,var(--m-copper),#7d4a26);}
.swatch-brass{background:linear-gradient(135deg,var(--m-brass),#8a6a30);}
.swatch-aluminum{background:linear-gradient(135deg,var(--m-aluminum),#5f6462);}
.swatch-zinc{background:linear-gradient(135deg,var(--m-zinc),#3d3f3b);}
.swatch-lead{background:linear-gradient(135deg,var(--m-lead),#2c2b28);}
.swatch-nickel{background:linear-gradient(135deg,#9c9186,#4c473e);}

/* ---------------------------------------------------------
   CTA band
   --------------------------------------------------------- */
.cta-band{
  background:var(--graphite-900);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:clamp(48px,7vw,88px) 0;
  text-align:center;
}
.cta-band h2{font-size:clamp(26px,4vw,42px);max-width:22ch;margin:0 auto 14px;}
.cta-band p{color:var(--paper-300);max-width:56ch;margin:0 auto 30px;}
.cta-band .cta-row{justify-content:center;}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.site-footer{
  padding-top:clamp(40px,6vw,64px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:32px;
  padding-bottom:36px;
}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--paper-500);
  margin-bottom:14px;
}
.footer-grid ul{list-style:none;margin:0;padding:0;}
.footer-grid li{margin-bottom:9px;}
.footer-grid a{
  text-decoration:none;
  color:var(--paper-300);
  font-size:14.5px;
  transition:color .2s;
}
.footer-grid a:hover{color:var(--m-brass);}
.footer-brand p{
  color:var(--paper-300);
  font-size:14.5px;
  max-width:40ch;
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  padding:20px var(--gutter) 26px;
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  color:var(--paper-500);
  border-top:1px solid var(--hairline);
}

/* ---------------------------------------------------------
   Reveal-on-scroll (subtle, orchestrated once per element)
   --------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Breadcrumb / page eyebrow header used on inner pages */
.page-head{
  padding:clamp(48px,8vw,88px) 0 clamp(28px,4vw,40px);
  border-bottom:1px solid var(--hairline);
}
.page-head h1{font-size:clamp(34px,5vw,58px);}
.page-head .desc{color:var(--paper-300);max-width:60ch;font-size:16.5px;margin-top:14px;}


/* ---------------------------------------------------------
   Contact page
   --------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(28px,5vw,64px);
    align-items: start;
}

@media (max-width:880px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-info {
    border: 1px solid var(--hairline);
    background: var(--graphite-900);
    padding: clamp(26px,3vw,38px);
}

.contact-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

    .contact-list li {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 14px 0;
        border-bottom: 1px solid var(--hairline);
    }

        .contact-list li:first-child {
            padding-top: 0;
        }

    .contact-list .tag {
        font-family: var(--f-mono);
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--paper-500);
    }

    .contact-list a {
        color: var(--paper-050);
        text-decoration: none;
        font-size: 16px;
    }

        .contact-list a:hover {
            color: var(--m-brass);
        }

.contact-divider {
    height: 1px;
    background: var(--hairline);
    margin: 26px 0 20px;
}

.contact-form-panel {
    border: 1px solid var(--hairline);
    background: var(--graphite-900);
    padding: clamp(26px,3vw,40px);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width:560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

    .form-field label {
        font-family: var(--f-mono);
        font-size: 11.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--paper-500);
    }

    .form-field .optional {
        text-transform: none;
        letter-spacing: 0;
        color: var(--paper-500);
        opacity: 0.7;
    }

.form-input {
    font-family: var(--f-body);
    font-size: 15.5px;
    color: var(--paper-050);
    background: var(--graphite-950);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius);
    padding: 13px 14px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

    .form-input::placeholder {
        color: var(--paper-500);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--m-brass);
        box-shadow: 0 0 0 3px rgba(201,161,90,0.18);
    }

.form-select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--paper-500) 50%), linear-gradient(135deg, var(--paper-500) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

.form-error {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--m-copper-bright);
}

.form-summary ul {
    margin: 0 0 20px;
    padding: 14px 16px;
    list-style: none;
    border: 1px solid var(--m-copper);
    background: rgba(184,112,61,0.08);
    color: var(--paper-100);
    font-size: 14px;
}

    .form-summary ul:empty {
        display: none;
    }

.form-success {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--m-brass);
    background: rgba(201,161,90,0.08);
    padding: 16px 18px;
    margin-bottom: 24px;
    font-size: 14.5px;
    color: var(--paper-100);
}

    .form-success strong {
        color: var(--m-brass);
        font-family: var(--f-display);
        font-size: 16px;
        text-transform: none;
    }

.form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.form-note {
    font-family: var(--f-mono);
    font-size: 11.5px;
    color: var(--paper-500);
}