/* ====================================================================
   ŞAHİN BAKIR · Editorial Industrial · 2026
   ==================================================================== */

:root{
  /* Palette — deep carbon + warm copper */
  --bg:        #0E0B08;
  --bg-2:     #14100B;
  --surface:  #1A1410;
  --line:     #2A1F16;
  --line-2:   #3A2A1E;
  --ink:      #F4EEE5;
  --ink-mute: #A89685;
  --ink-low:  #6E5C4B;

  --copper-50:  #F8E1C2;
  --copper-100: #F2C58A;
  --copper-200: #E6A86A;
  --copper-300: #D08A4A;
  --copper-400: #B87333;   /* primary */
  --copper-500: #95591F;
  --copper-600: #6B3F1A;
  --copper-700: #3F2310;

  --patina:   #4A8B7C;     /* aged copper accent */

  /* Type */
  --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --body:    'Manrope', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, Menlo, monospace;

  /* Sizing */
  --pad: clamp(20px, 4vw, 64px);
  --gap: clamp(20px, 3vw, 40px);
  --radius: 2px;
}

/* --------- Base --------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
em{font-style:italic;color:var(--copper-200);font-family:var(--display);font-weight:400}

::selection{background:var(--copper-400);color:#0E0B08}

/* Grain overlay */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;opacity:.6;
}

/* ====================================================================
   NAV
   ==================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  background:linear-gradient(to bottom, rgba(14,11,8,.92), rgba(14,11,8,.55) 70%, transparent);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.nav__logo{display:inline-flex}
.nav__logo img{height:160px;width:auto;display:block;
  filter:drop-shadow(0 2px 14px rgba(184,115,51,.35));
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav__logo:hover img{transform:scale(1.04)}
.nav__links{display:flex;gap:28px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.nav__links a{position:relative;padding:6px 0;transition:color .25s}
.nav__links a:hover{color:var(--copper-100)}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--copper-300);transition:width .35s cubic-bezier(.2,.8,.2,1)
}
.nav__links a:hover::after{width:100%}

.nav__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 18px;border:1px solid var(--copper-500);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--copper-100);
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.nav__cta:hover{background:var(--copper-400);color:#0E0B08;border-color:var(--copper-400);transform:translateY(-1px)}

/* ====================================================================
   HERO
   ==================================================================== */
.hero{
  position:relative;
  padding:224px var(--pad) 80px;
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__sheet{
  position:absolute;inset:-10% -20% -20% 30%;
  background:
    radial-gradient(60% 50% at 70% 30%, rgba(208,138,74,.18), transparent 70%),
    radial-gradient(40% 40% at 90% 80%, rgba(184,115,51,.22), transparent 70%),
    conic-gradient(from 200deg at 80% 50%, #1A1410 0deg, #2A1610 80deg, #6B3F1A 160deg, #B87333 200deg, #D08A4A 230deg, #6B3F1A 280deg, #1A1410 360deg);
  filter:blur(60px) saturate(120%);
  opacity:.55;
  animation:drift 18s ease-in-out infinite alternate;
}
.hero__glow{
  position:absolute;left:50%;top:120%;
  width:120vw;height:60vw;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(184,115,51,.18), transparent 60%);
  filter:blur(30px);
}
@keyframes drift{
  from{transform:translate(0,0) scale(1)}
  to  {transform:translate(-6%, 4%) scale(1.08)}
}

/* hero brand watermark — kartal amblemi */
.hero__mark{
  position:absolute;z-index:0;pointer-events:none;
  right:-4%;top:60%;transform:translateY(-50%);
  width:min(48vw, 700px);height:auto;
  opacity:.09;
  filter:blur(2.5px) drop-shadow(0 0 80px rgba(184,115,51,.4)) saturate(1.1);
  animation:markFloat 12s ease-in-out infinite alternate;
}
@keyframes markFloat{
  from{transform:translateY(-52%) rotate(-1.5deg)}
  to  {transform:translateY(-48%) rotate(1.5deg)}
}

.hero > *{position:relative;z-index:1}

.hero__meta{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:60px;
  border-bottom:1px solid var(--line);
  margin-bottom:60px;
}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper-200);
}
.kicker.mute{color:var(--ink-low)}

.hero__title{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(48px, 9.4vw, 168px);
  line-height:.95;
  letter-spacing:-0.025em;
  margin:0;
  font-variation-settings: "opsz" 144;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line em{font-weight:300;color:var(--copper-100);font-style:italic}
.hero__title .copper{
  background:linear-gradient(180deg, var(--copper-50) 0%, var(--copper-300) 50%, var(--copper-600) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  font-style:italic;font-weight:400;
}

/* staggered fade-up on load */
.hero__title .line{opacity:0;transform:translateY(40px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero__title .line:nth-child(1){animation-delay:.1s}
.hero__title .line:nth-child(2){animation-delay:.25s}
.hero__title .line:nth-child(3){animation-delay:.4s}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

.hero__row{
  display:grid;grid-template-columns:1.3fr 1fr;gap:60px;
  margin-top:64px;align-items:end;
}
.hero__lead{
  max-width:540px;font-size:clamp(15px,1.3vw,18px);line-height:1.65;
  color:var(--ink-mute);
}
.hero__actions{display:flex;gap:14px;justify-self:end;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;font-family:var(--mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .3s, background .3s, color .3s, border-color .3s;
  cursor:pointer;
}
.btn--solid{background:var(--copper-400);color:#100A04}
.btn--solid:hover{background:var(--copper-200);transform:translateY(-2px)}
.btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--copper-400);color:var(--copper-100)}

.hero__tenure{
  display:flex;align-items:center;gap:24px;
  margin-top:80px;padding-top:32px;border-top:1px solid var(--line);
}
.hero__tenure-line{
  flex:0 0 56px;height:1px;background:var(--copper-400);display:block;
}
.hero__tenure-text{
  font-family:var(--mono);font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-low);
}

/* ====================================================================
   MARQUEE
   ==================================================================== */
.marquee{
  border-block:1px solid var(--line);
  background:linear-gradient(90deg, var(--bg-2), var(--surface), var(--bg-2));
  padding:22px 0;overflow:hidden;
}
.marquee__track{
  display:flex;gap:36px;white-space:nowrap;
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.4vw,34px);
  color:var(--copper-200);
  animation:scroll 36s linear infinite;
}
.marquee__track span:nth-child(even){color:var(--ink-low);font-style:normal}
@keyframes scroll{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

/* ====================================================================
   SECTION GENERICS
   ==================================================================== */
.section-head{padding:120px var(--pad) 40px;max-width:1100px}
.eyebrow{
  display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--copper-300);
  padding-bottom:24px;
}
.section-title{
  font-family:var(--display);font-weight:300;
  font-size:clamp(36px,5.6vw,84px);line-height:1.02;letter-spacing:-.02em;
  margin:0;font-variation-settings:"opsz" 144;
}
.section-title em{font-weight:300;color:var(--copper-200)}
.section-sub{
  margin-top:28px;max-width:640px;font-size:clamp(15px,1.2vw,17px);
  color:var(--ink-mute);line-height:1.65;
}
.mute{color:var(--ink-mute)}

/* ====================================================================
   PRODUCTS GRID
   ==================================================================== */
.products{padding-bottom:80px}
.grid{
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.card{
  position:relative;
  grid-column:span 4;
  background:var(--bg-2);
  padding:36px 32px 32px;
  display:flex;flex-direction:column;gap:24px;
  min-height:520px;
  transition:background .4s;
  overflow:hidden;
}
.card:hover{background:var(--surface)}
.card:hover .card__visual > *{transform:scale(1.04)}

.card__num{
  position:absolute;top:24px;right:24px;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--ink-low);
}
.card__visual{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  display:block;
  background:
    radial-gradient(circle at 30% 30%, rgba(184,115,51,.08), transparent 60%),
    linear-gradient(180deg, #0E0B08, #1A1410);
  border:1px solid var(--line);
  overflow:hidden;
  flex:none;
}
.card__visual > *{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.card__visual img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(1.05) contrast(1.04);
  display:block;
}
.card__visual::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(14,11,8,.55) 100%),
    radial-gradient(120% 80% at 30% 20%, rgba(184,115,51,.08), transparent 60%);
}
.card__body h3{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:28px;letter-spacing:-.01em;margin:0 0 8px;
  color:var(--ink);
}
.card__body p{
  font-size:14px;color:var(--ink-mute);line-height:1.6;margin:0;
}
.spec{margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding-top:18px;border-top:1px dashed var(--line-2)}
.spec dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-low);margin-bottom:4px}
.spec dd{font-family:var(--mono);font-size:12px;color:var(--copper-100);margin:0}

/* === Product visuals — CSS-painted === */

/* 01 Lama : stacked horizontal bars */
.lama-stack{width:75%;display:flex;flex-direction:column;gap:8px;transform:rotate(-3deg)}
.lama-stack span{
  height:14px;border-radius:1px;
  background:linear-gradient(180deg, #F2C58A 0%, #B87333 45%, #6B3F1A 100%);
  box-shadow:0 4px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.lama-stack span:nth-child(1){width:100%}
.lama-stack span:nth-child(2){width:88%}
.lama-stack span:nth-child(3){width:96%}
.lama-stack span:nth-child(4){width:82%}
.lama-stack span:nth-child(5){width:92%}

/* 02 Çubuk : rod cluster */
.rod-cluster{display:flex;align-items:flex-end;gap:14px;height:70%;transform:rotate(8deg)}
.rod-cluster i{
  display:block;width:14px;
  background:linear-gradient(90deg, #6B3F1A, #D08A4A 50%, #6B3F1A);
  border-radius:7px;
  box-shadow:0 0 12px rgba(184,115,51,.3);
}
.rod-cluster i:nth-child(1){height:60%}
.rod-cluster i:nth-child(2){height:90%}
.rod-cluster i:nth-child(3){height:75%}
.rod-cluster i:nth-child(4){height:50%}

/* 03 Boru : tube cross-section */
.tube{position:relative;width:160px;height:160px}
.tube__core{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 30deg, #F2C58A, #B87333, #6B3F1A, #B87333, #F2C58A);
  box-shadow:0 0 40px rgba(184,115,51,.3);
}
.tube__rim{
  position:absolute;inset:24px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #1A1410, #0E0B08);
  box-shadow:inset 0 0 30px rgba(0,0,0,.8), inset 0 2px 0 rgba(242,197,138,.2);
}

/* 04 Kangal : coiled bars */
.coil{position:relative;width:90%;aspect-ratio:1.4;display:flex;align-items:center;justify-content:center}
.coil span{
  position:absolute;border:2px solid transparent;border-radius:50%;
  background:
    linear-gradient(#1A1410,#1A1410) padding-box,
    conic-gradient(from 200deg, #6B3F1A, #F2C58A, #B87333, #6B3F1A) border-box;
}
.coil span:nth-child(1){width:90%;height:90%;opacity:.5}
.coil span:nth-child(2){width:80%;height:80%;opacity:.65}
.coil span:nth-child(3){width:70%;height:70%;opacity:.8}
.coil span:nth-child(4){width:60%;height:60%}
.coil span:nth-child(5){width:50%;height:50%}
.coil span:nth-child(6){width:40%;height:40%}
.coil span:nth-child(7){width:30%;height:30%}

/* 05 Şerit : long strip */
.strip{
  width:90%;height:28px;
  background:linear-gradient(180deg, #F2C58A 0%, #D08A4A 30%, #6B3F1A 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3);
  transform:rotate(-2deg) skewX(-12deg);
  position:relative;
}
.strip::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(0,0,0,.15) 14px, rgba(0,0,0,.15) 15px);
}

/* 06 Levha : tilted sheet */
.sheet{
  width:78%;aspect-ratio:1.3;
  background:
    linear-gradient(135deg, #F2C58A 0%, #D08A4A 25%, #95591F 55%, #6B3F1A 100%);
  box-shadow:0 14px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.3);
  transform:rotate(-6deg) perspective(600px) rotateY(-20deg) rotateX(8deg);
  position:relative;
}
.sheet::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 8px);
}
.sheet::after{
  content:"Cu";position:absolute;top:12px;left:14px;
  font-family:var(--mono);font-size:11px;color:rgba(14,11,8,.55);letter-spacing:.2em;
}

/* ====================================================================
   ABOUT
   ==================================================================== */
.about{
  display:grid;grid-template-columns:1fr 1.2fr;gap:80px;
  padding:140px var(--pad);align-items:center;
  border-bottom:1px solid var(--line);
}
.about__col--mark{display:flex;justify-content:center;align-items:center}
.about__photo{
  position:relative;
  width:min(520px, 100%);aspect-ratio:1.1;
  overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.5), 0 0 0 1px var(--line-2);
}
.about__photo img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.08) contrast(1.05);
}
.about__photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, transparent 55%, rgba(14,11,8,.55) 100%),
    radial-gradient(80% 60% at 30% 20%, rgba(184,115,51,.12), transparent 60%);
}
.about__photo .about__seal{
  position:absolute;z-index:3;
  right:18px;top:18px;
  width:140px;height:140px;
  padding:18px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #1f1813, #0E0B08 75%);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(242,197,138,.35), inset 0 0 0 1px rgba(242,197,138,.12);
  object-fit:contain;
  filter:drop-shadow(0 0 14px rgba(184,115,51,.45));
}
.about__stamp{
  position:absolute;left:18px;bottom:18px;z-index:2;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper-100);
  border:1px solid rgba(242,197,138,.4);
  padding:8px 14px;
  background:rgba(14,11,8,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.about__col h2{margin-bottom:32px}
.about__col p{font-size:clamp(15px,1.2vw,18px);color:var(--ink-mute);line-height:1.7;max-width:560px;margin:0 0 16px}
.bullets{list-style:none;padding:0;margin:32px 0 0;display:flex;flex-direction:column;gap:14px}
.bullets li{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.bullets span{color:var(--copper-300);font-family:var(--display);font-style:italic}

/* ====================================================================
   PROCESS
   ==================================================================== */
.process{padding-bottom:140px}
.process__list{
  list-style:none;margin:0;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.process__list li{
  padding:50px 32px 60px;border-right:1px solid var(--line);position:relative;
  transition:background .4s;
}
.process__list li:last-child{border-right:0}
.process__list li:hover{background:var(--bg-2)}
.process__num{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--copper-300);
  display:block;margin-bottom:32px;
}
.process__list h3{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:32px;color:var(--ink);margin:0 0 14px;letter-spacing:-.01em;
}
.process__list p{font-size:14px;color:var(--ink-mute);line-height:1.65;margin:0}

/* ====================================================================
   QUALITY / TICKER
   ==================================================================== */
.quality{padding:0 0 140px;background:linear-gradient(180deg,var(--bg) 0%, #110D0A 100%)}
.quality__head{padding:120px var(--pad) 60px}
.ticker{padding:0 var(--pad)}
.spec-table{
  width:100%;border-collapse:collapse;
  font-family:var(--mono);
}
.spec-table th{
  text-align:left;font-weight:400;
  padding:18px 24px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-low);
  border-bottom:1px solid var(--line-2);
}
.spec-table td{
  padding:22px 24px;font-size:14px;
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.spec-table tbody tr:hover td{background:var(--bg-2);color:var(--copper-100)}
.spec-table tr td:first-child{color:var(--ink);font-family:var(--display);font-style:italic;font-size:18px}
.spec-table tr td:nth-child(2){color:var(--copper-200);font-weight:500;font-size:15px}

/* ====================================================================
   CONTACT
   ==================================================================== */
.contact{padding:140px var(--pad);background:
  radial-gradient(80% 60% at 90% 20%, rgba(184,115,51,.12), transparent 70%),
  var(--bg-2);
  border-top:1px solid var(--line);
}
.contact__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:90px;max-width:1300px;margin:0 auto;
}
.contact__lead{font-size:clamp(15px,1.2vw,18px);color:var(--ink-mute);max-width:480px;margin:28px 0 60px;line-height:1.65}
.contact__rows{display:grid;gap:24px}
.contact__rows > div{display:grid;grid-template-columns:120px 1fr;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
.contact__rows a{color:var(--copper-100);font-family:var(--display);font-style:italic;font-size:20px;letter-spacing:-.005em}
.contact__rows a:hover{color:var(--copper-200)}
.contact__rows span:not(.kicker){font-family:var(--mono);font-size:13px;color:var(--ink)}

.form{display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-low)}
.form input, .form select, .form textarea{
  background:var(--bg);border:1px solid var(--line-2);
  padding:14px 16px;color:var(--ink);font-family:var(--body);font-size:15px;
  border-radius:0;transition:border-color .3s, background .3s;
  resize:vertical;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none;border-color:var(--copper-400);background:var(--surface);
}
.form button{justify-self:start;margin-top:8px;border:0}
.form button.sent{background:var(--patina);color:#0E0B08}

/* ====================================================================
   FOOTER
   ==================================================================== */
.foot{padding:100px var(--pad) 30px;background:#0A0805;border-top:1px solid var(--line)}
.foot__top{display:flex;justify-content:space-between;align-items:end;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.foot__top img{height:112px;width:auto;display:block;filter:drop-shadow(0 4px 20px rgba(184,115,51,.3))}
.foot__top p{max-width:420px;margin:0;font-style:italic;font-family:var(--display);font-size:18px;color:var(--ink-mute);font-weight:300}
.foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:60px 0}
.foot__grid > div{display:flex;flex-direction:column;gap:8px}
.foot__grid a, .foot__grid span:not(.kicker){font-family:var(--mono);font-size:13px;color:var(--ink-mute);transition:color .25s}
.foot__grid a:hover{color:var(--copper-100)}
.foot__grid .kicker{margin-bottom:14px;color:var(--copper-300)}
.foot__bottom{display:flex;justify-content:space-between;padding-top:30px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-low)}

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 1100px){
  .nav__links{display:none}
  .hero__row{grid-template-columns:1fr;gap:32px}
  .hero__actions{justify-self:start}
  .card{grid-column:span 6}
  .about{grid-template-columns:1fr;gap:50px}
  .process__list{grid-template-columns:repeat(2,1fr)}
  .process__list li:nth-child(2){border-right:0}
  .process__list li:nth-child(1),
  .process__list li:nth-child(2){border-bottom:1px solid var(--line)}
  .contact__inner{grid-template-columns:1fr;gap:60px}
  .foot__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 680px){
  .nav__cta span{display:none}
  .nav__cta{padding:11px 14px}
  .nav__logo img{height:88px}
  .foot__top img{height:86px}
  .hero__mark{width:96vw;opacity:.07;right:-18%;top:42%}
  .about__photo .about__seal{width:108px;height:108px;padding:16px;right:14px;top:14px}
  .hero{padding-top:150px;min-height:auto}
  .hero__meta{padding-bottom:40px;margin-bottom:40px;flex-wrap:wrap;gap:12px}
  .hero__title{font-size:clamp(40px,12vw,90px)}
  .hero__row{margin-top:40px}
  .hero__tenure{margin-top:50px;padding-top:24px;gap:18px}
  .hero__tenure-line{flex-basis:40px}
  .hero__tenure-text{font-size:11px;letter-spacing:.18em}
  .grid{grid-template-columns:1fr;gap:1px}
  .card{grid-column:span 1;min-height:auto;padding:28px 24px}
  .card__visual{min-height:180px}
  .spec{grid-template-columns:1fr 1fr}
  .process__list{grid-template-columns:1fr}
  .process__list li{border-right:0;border-bottom:1px solid var(--line);padding:36px 24px}
  .process__list li:last-child{border-bottom:0}
  .spec-table th, .spec-table td{padding:14px 12px;font-size:12px}
  .spec-table tr td:first-child{font-size:14px}
  .form__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr;gap:30px}
  .contact__rows > div{grid-template-columns:1fr;gap:6px}
  .foot__bottom{flex-direction:column;gap:10px;align-items:flex-start}
}