/* ==========================================================
   Meridian Studio — Company Profile
   Design tokens
   ========================================================== */
:root{
  --ink:#10161c;
  --paper:#f1eee4;
  --paper-2:#e7e2d2;
  --paper-3:#ede9dc;
  --brass:#b8863b;
  --brass-dark:#96702e;
  --teal:#1f5c56;
  --slate:#5c6670;
  --line: rgba(16,22,28,0.13);
  --radius: 4px;
  --display: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "JetBrains Mono", monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}
.wrap{max-width:1200px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

a:focus-visible, button:focus-visible{outline:2px solid var(--brass-dark); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- corner marks (signature) ---------- */
.corners{position:relative;}
.corners::before,.corners::after,
.corners .c-tl,.corners .c-br{position:absolute; width:14px; height:14px; pointer-events:none;}
.corners::before{content:""; top:0; left:0; border-top:1.2px solid var(--ink); border-left:1.2px solid var(--ink);}
.corners::after{content:""; bottom:0; right:0; border-bottom:1.2px solid var(--ink); border-right:1.2px solid var(--ink);}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(241,238,228,0.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-0.01em;}
.nav-links{display:flex; gap:34px; list-style:none; margin:0; padding:0; font-size:0.92rem;}
.nav-links a{text-decoration:none; position:relative; padding-bottom:4px;}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--brass-dark); transition:width .25s ease;}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  font-family:var(--mono); font-size:0.8rem; text-decoration:none;
  padding:10px 20px; border:1px solid var(--ink); border-radius:var(--radius);
  transition:background .2s ease, color .2s ease;
}
.nav-cta:hover{background:var(--ink); color:var(--paper);}
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-btn span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}

@media (max-width:880px){
  .nav-links{position:fixed; inset:60px 0 0 0; background:var(--paper); flex-direction:column; align-items:flex-start; padding:32px 24px; gap:22px; font-size:1.05rem; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; border-top:1px solid var(--line);}
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-cta{display:none;}
  .menu-btn{display:block;}
}

/* ---------- Hero ---------- */
.hero{padding:76px 0 56px; position:relative;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media (max-width:920px){ .hero-grid{grid-template-columns:1fr;} }

.eyebrow{
  font-family:var(--mono); font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal); display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brass-dark);}
h1{
  font-family:var(--display); font-weight:700; font-size:clamp(2.3rem,4.6vw,3.6rem);
  line-height:1.06; letter-spacing:-0.02em; margin:0 0 22px;
}
h1 span{color:var(--brass-dark);}
.lede{font-size:1.05rem; color:#3d4750; max-width:46ch; margin:0 0 32px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.btn{
  font-family:var(--body); font-weight:600; font-size:0.94rem; text-decoration:none;
  padding:14px 26px; border-radius:var(--radius); display:inline-block; transition:transform .2s ease, box-shadow .2s ease;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 22px -14px rgba(16,22,28,0.55);}
.btn-ghost{border:1px solid var(--ink); color:var(--ink);}
.btn-ghost:hover{background:var(--ink); color:var(--paper);}

.hero-art{max-width:480px; margin:0 auto; padding:8px;}

.stat-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper-3);}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr);}
@media (max-width:760px){ .stat-grid{grid-template-columns:repeat(2,1fr);} }
.stat{padding:30px 28px; border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
@media (max-width:760px){ .stat:nth-child(2n){border-right:none;} .stat{border-bottom:1px solid var(--line);} }
.stat-num{font-family:var(--display); font-size:2rem; font-weight:700; color:var(--ink);}
.stat-label{font-family:var(--mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-top:6px;}

/* ---------- Section shared ---------- */
section{padding:96px 0;}
.section-label{font-family:var(--mono); font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal);}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
.section-head h2{font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,3vw,2.5rem); margin:8px 0 0; letter-spacing:-0.01em;}
.section-head p{max-width:38ch; color:#4a5459; margin:0;}

/* ---------- About ---------- */
.about{padding-top:0;}
.about-grid{display:grid; grid-template-columns:0.42fr 0.58fr; gap:56px;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }
.about blockquote{
  font-family:var(--display); font-weight:500; font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.32; margin:14px 0 0; letter-spacing:-0.01em;
}
.fact-list{list-style:none; margin:0; padding:0; display:grid; gap:0;}
.fact-list li{display:flex; justify-content:space-between; padding:18px 0; border-bottom:1px solid var(--line); font-size:0.95rem;}
.fact-list li b{font-family:var(--display); font-weight:600;}
.about-copy{color:#3d4750; margin-top:24px; max-width:58ch;}

/* ---------- Services ---------- */
.service-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:900px){ .service-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .service-grid{grid-template-columns:1fr;} }
.service-card{background:var(--paper); padding:34px 26px; transition:background .25s ease;}
.service-card:hover{background:var(--paper-3);}
.service-card img{width:36px; height:36px; margin-bottom:20px;}
.service-card h3{font-family:var(--display); font-weight:600; font-size:1.12rem; margin:0 0 10px;}
.service-card p{font-size:0.9rem; color:#4a5459; margin:0;}

/* ---------- Process ---------- */
.process{background:var(--ink); color:var(--paper);}
.process .section-label{color:var(--brass);}
.process .section-head p{color:#c7cdd1;}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative;}
@media (max-width:860px){ .process-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .process-grid{grid-template-columns:1fr;} }
.process-step{position:relative; padding-top:20px; border-top:1px solid rgba(241,238,228,0.22);}
.process-num{font-family:var(--mono); font-size:0.8rem; color:var(--brass);}
.process-step h3{font-family:var(--display); font-weight:600; font-size:1.05rem; margin:12px 0 8px;}
.process-step p{font-size:0.88rem; color:#c7cdd1; margin:0;}

/* ---------- Work ---------- */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:860px){ .work-grid{grid-template-columns:1fr;} }
.work-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper-3); transition:transform .25s ease, box-shadow .25s ease;}
.work-card:hover{transform:translateY(-4px); box-shadow:0 18px 30px -20px rgba(16,22,28,0.4);}
.work-thumb{aspect-ratio:4/3; overflow:hidden;}
.work-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.work-card:hover .work-thumb img{transform:scale(1.05);}
.work-body{padding:20px 22px 24px;}
.work-tag{font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--teal);}
.work-body h3{font-family:var(--display); font-weight:600; font-size:1.08rem; margin:8px 0 6px;}
.work-body p{font-size:0.88rem; color:#4a5459; margin:0;}

/* ---------- Team ---------- */
.team-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
@media (max-width:860px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
.team-card img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); margin-bottom:16px;}
.team-card h3{font-family:var(--display); font-weight:600; font-size:1rem; margin:0 0 2px;}
.team-card span{font-family:var(--mono); font-size:0.78rem; color:var(--slate);}

/* ---------- Clients ---------- */
.clients{padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.clients-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:28px;}
.client-mark{font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--slate); letter-spacing:-0.01em; opacity:0.75;}

/* ---------- Testimonial ---------- */
.voices{text-align:center;}
.voice-quote{font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,2.6vw,1.85rem); max-width:60ch; margin:18px auto 0; line-height:1.4; letter-spacing:-0.01em;}
.voice-attr{margin-top:24px; font-family:var(--mono); font-size:0.82rem; color:var(--slate);}

/* ---------- CTA ---------- */
.cta-box{
  background:var(--brass); border-radius:var(--radius); padding:60px 52px;
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
.cta-box h2{font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--ink); margin:0; max-width:22ch; letter-spacing:-0.01em;}
.cta-box .btn-primary{background:var(--ink);}
@media (max-width:640px){ .cta-box{padding:40px 26px;} }

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:0.5fr 0.5fr; gap:56px;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-list{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:16px;}
.contact-list li{font-size:0.95rem;}
.contact-list b{display:block; font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:4px;}

form.contact-form{display:grid; gap:16px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
.contact-form label{font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); display:block; margin-bottom:6px;}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper); font-family:var(--body); font-size:0.95rem; color:var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--brass-dark);}
.contact-form button{justify-self:start; border:none; cursor:pointer;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:52px 0 36px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .foot-grid{grid-template-columns:1fr;} }
.foot-grid h4{font-family:var(--mono); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin:0 0 16px;}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.foot-grid a{text-decoration:none; font-size:0.92rem;}
.foot-grid a:hover{color:var(--brass-dark);}
.foot-about{color:#5c6864; font-size:0.9rem; max-width:32ch; margin-top:14px;}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.8rem; color:#6b7671; font-family:var(--mono);}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}