/* ===========================================================
   omp studio — Omar Pérez | Graphic Design & Motion Graphic
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --coral: #FF5F5F;
  --coral-dark: #E6473F;
  --ink: #16171C;
  --ink-soft: #55565f;
  --ink-faint: #8c8d96;
  --paper: #ffffff;
  --paper-dim: #F6F5F3;
  --line: #ECEAE6;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --max: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* off-canvas mobile menu (translateX(100%)) sits off the right edge;
     clip its horizontal overflow so the page never scrolls sideways.
     `clip` (not `hidden`) keeps the sticky header working. */
  overflow-x: clip;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width: var(--max); margin:0 auto; padding: 0 32px; position:relative; }

h1,h2,h3,h4{ font-family: var(--font-head); font-weight:700; margin:0; line-height:1.15; }
p{ margin: 0 0 1em; color: var(--ink-soft); }
p:last-child{ margin-bottom:0; }

.eyebrow{
  font-family: var(--font-body); font-weight:600; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color: var(--coral); display:flex; align-items:center; gap:8px;
  margin-bottom: 14px;
}
.eyebrow::before{ display:none; }

.btn{
  font-family: var(--font-body); font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 26px; border-radius: 999px; border: 2px solid var(--ink);
  color: var(--ink); background: transparent; cursor:pointer; transition: all .2s ease;
}
.btn:hover{ background: var(--ink); color:#fff; }
.btn.solid{ background: var(--coral); border-color: var(--coral); color:#fff; }
.btn.solid:hover{ background: var(--coral-dark); border-color: var(--coral-dark); }
.btn.on-dark{ border-color:#fff; color:#fff; }
.btn.on-dark:hover{ background:#fff; color: var(--ink); }

/* ---------- header ---------- */
header.site{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* the header bar spans the full viewport: the coral logo block sits flush
   against the left edge instead of being inset by the .wrap gutter. */
header.site .wrap{ max-width:none; margin:0; padding:0; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding: 0; }
.logo{
  background: var(--coral); color:#fff; font-family: var(--font-head); font-weight:800;
  font-size: 18px; letter-spacing:.01em; padding: 18px 26px; display:inline-block;
}
nav.links{ display:flex; gap:36px; align-items:center; }
nav.links a{
  font-family: var(--font-body); font-weight:600; font-size:14.5px; color: var(--ink-soft);
  padding: 6px 2px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
nav.links a:hover{ color: var(--coral); }
nav.links a.active{ color: var(--coral); border-color: var(--coral); }
.nav-right{ display:flex; align-items:center; gap:26px; padding-right: 40px; }

.burger{ display:none; background:none; border:none; cursor:pointer; padding: 18px 24px; }
.burger span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition: transform .2s ease, opacity .2s ease; }
.burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- social rail ---------- */
.social-rail{
  position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 60;
  display:flex; flex-direction:column; gap:14px;
}
.social-rail a{
  width:38px; height:38px; border-radius:50%; background: var(--paper-dim);
  display:flex; align-items:center; justify-content:center; color: var(--ink-soft);
  border: 1px solid var(--line); transition: all .2s ease;
}
.social-rail a:hover{ background: var(--coral); color:#fff; border-color: var(--coral); }
.social-rail svg{ width:17px; height:17px; }

/* ---------- hero (light glassmorphism) ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding: 80px 0 90px;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(70% 60% at 74% 26%, rgba(255,95,95,.22) 0%, transparent 55%),
              radial-gradient(60% 60% at 18% 82%, rgba(255,95,95,.14) 0%, transparent 55%),
              linear-gradient(160deg, #FBF9F8 0%, #F1ECE9 100%);
}

/* floating 3D orbs + rings — reusable decorative layer (`.scene`),
   used by the hero and by the home CTA band. */
.scene{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.orb, .ring{ position:absolute; }
.orb{
  border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #fff0f0 0%, #ffc6c6 20%, #ff8f8f 48%, #ff6f6f 76%, #ef5a5a 100%);
  box-shadow: 0 34px 80px rgba(230,90,90,.30), inset -10px -14px 40px rgba(150,50,50,.42);
}
.orb.blur{ filter: blur(9px); opacity:.9; }
.orb.soft{ filter: blur(2px); }
.ring{ border-radius:50%; background:transparent; }
.ring::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 200deg, #ffd0d0, var(--coral), #c11f1f, #FF9A9A, #ffd0d0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px));
  filter: blur(3px); box-shadow: 0 18px 50px rgba(200,45,45,.30);
}
.hero .o1{ width:340px; height:340px; top:-90px; right:6%; }
.hero .o2{ width:150px; height:150px; top:34%; left:4%; }
.hero .o3{ width:110px; height:110px; bottom:12%; right:14%; }
.hero .o4{ width:420px; height:420px; bottom:-180px; left:-80px; }
.hero .r1{ width:230px; height:230px; top:6%; left:18%; }
.hero .r2{ width:170px; height:170px; bottom:14%; left:42%; transform: rotate(-25deg); }

/* the hero panel runs wider than the site's standard 1180px gutter */
.hero .wrap{ position:relative; z-index:2; max-width: min(1340px, 94vw); }

/* the frosted panel — reusable across the home page */
.glass{
  position:relative; border-radius:28px; overflow:hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.32));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 30px 70px rgba(120,60,50,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, rgba(255,255,255,.5) 0%, transparent 42%);
}
.glass > *{ position:relative; z-index:2; }
.hero .glass{ padding: 56px 52px 58px; }

.hero .eyebrow{ color: #C42D18; margin-bottom: 22px; }
.hero .eyebrow::before{ background: #C42D18; }
.hero h1{
  font-size: clamp(40px, 6.2vw, 82px); line-height:1.02; letter-spacing:-.02em;
  color: var(--ink); max-width: 820px; margin-bottom: 24px;
}
.hero h1 em{
  font-style:normal;
  background: linear-gradient(90deg, #C42D18, #E8452F);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{ max-width: 560px; color: var(--ink-soft); font-size:18px; margin-bottom: 34px; }
.hero-tags{ display:flex; gap:12px; flex-wrap:wrap; margin-top: 44px; }
.hero-tags span{
  font-size:13.5px; font-weight:600; color:#2e2a2b;
  background: rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.10);
  padding:10px 18px; border-radius:999px; backdrop-filter: blur(6px);
}

/* ---------- intro / showreel ---------- */
.intro{ padding: 90px 0; }
.intro .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.intro h2{ font-size: clamp(28px,3.4vw,42px); margin-bottom:18px; }
.showreel{
  position:relative; aspect-ratio: 16/9; border-radius: 24px; overflow:hidden;
  background: linear-gradient(135deg, var(--coral), #ff8f6b);
  display:flex; align-items:center; justify-content:center;
}
.showreel-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.showreel iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* the coral tint is the resting/poster treatment only — once the reel is
   playing the footage shows in its real colours. */
.showreel:not(.playing) .showreel-poster{ opacity:.85; mix-blend-mode: multiply; }
.showreel.playing .showreel-poster{ display:none; }
.showreel.playing .play-btn{ display:none; }
.play-btn{
  position:relative; z-index:2; width:78px; height:78px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 14px 30px -10px rgba(0,0,0,.4);
  transition: transform .2s ease; border:none; padding:0; cursor:pointer;
}
.play-btn:hover{ transform: scale(1.08); }
.play-btn svg{ width:22px; height:22px; margin-left:3px; }

/* ---------- section shell ---------- */
section{ padding: 90px 0; }
section.dim{ background: var(--paper-dim); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:50px; flex-wrap:wrap; }
.section-head h2{ font-size: clamp(30px,4vw,46px); max-width:600px; }
.section-head p{ max-width:360px; font-size:14.5px; }

/* ---------- projects (featured) ---------- */
.projects-featured{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.project-card{
  position:relative; border-radius: 22px; overflow:hidden; aspect-ratio: 4/5;
  background: var(--ink); display:flex; align-items:flex-end;
}
.project-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.project-card:hover img{ transform: scale(1.06); }
.project-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.78) 100%);
}
.project-card .info{ position:relative; z-index:2; padding: 30px; color:#fff; }
.project-card .tag{ font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--coral); margin-bottom:8px; display:block; }
.project-card h3{ font-size: 26px; color:#fff; }

/* ---------- more work grid ---------- */
.work-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.work-card{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio: 3/4;
  background: var(--paper-dim); display:flex; flex-direction:column;
}
.work-card .thumb{ position:relative; flex:1; overflow:hidden; background:#fff; }
.work-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.work-card.contain .thumb img{ object-fit:contain; padding: 26px; }
.work-card:hover .thumb img{ transform: scale(1.07); }
.work-card.contain:hover .thumb img{ transform: scale(1.04); }
.work-card .info{ position:relative; z-index:2; padding:18px 22px 22px; background: var(--ink); color:#fff; }
.work-card h4{ font-size:17px; color:#fff; }
.work-card span{ font-size:12px; color: rgba(255,255,255,.6); }

/* ---------- process ---------- */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap: 26px; }
.process-step{ border-top: 3px solid var(--coral); padding-top:18px; }
.process-step .num{ font-family: var(--font-head); font-weight:800; font-size:34px; color: var(--line); display:block; margin-bottom: 10px; }
.process-step h4{ font-size:18px; margin-bottom:8px; }
.process-step p{ font-size:14px; }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--ink); color:#fff; border-radius: 28px; padding: 64px 60px;
  display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
}
.cta-band h2{ color:#fff; font-size: clamp(26px,3.2vw,40px); max-width:520px; }
.cta-band p{ color: rgba(255,255,255,.7); }

/* ---------- footer ---------- */
footer.site{ background: var(--ink); color: rgba(255,255,255,.7); padding: 70px 0 30px; }
.foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.12); }
.foot-col .logo{ padding:0; background:none; font-size:20px; margin-bottom:14px; }
.foot-col p{ color: rgba(255,255,255,.55); font-size:13.5px; max-width:240px; }
.foot-col h5{ font-family: var(--font-body); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.5); margin-bottom:16px; }
.foot-col a{ display:block; color: rgba(255,255,255,.72); font-size:14.5px; margin-bottom:10px; transition: color .15s ease; }
.foot-col a:hover{ color: var(--coral); }
.foot-bottom{ display:flex; justify-content:space-between; margin-top: 26px; font-size:12.5px; color: rgba(255,255,255,.4); flex-wrap:wrap; gap:10px; }
.foot-social{ display:flex; gap:12px; }
.foot-social a{ width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; }
.foot-social svg{ width:15px; height:15px; }
.foot-social a:hover{ background: var(--coral); border-color: var(--coral); }

/* ===================== PAGE HERO (services / about / contact) ===================== */
.page-hero{
  position:relative; padding: 150px 0 90px; overflow:hidden; background: var(--paper-dim);
}
.page-hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.9; }
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero h1{ font-size: clamp(38px,5.6vw,64px); max-width: 680px; }
.page-hero p.lead{ max-width:480px; font-size:16.5px; margin-top:18px; }

/* full-width background variant — image spans edge-to-edge at its own
   proportions (no side-cropping) and the section is tall enough to show
   the whole illustration instead of just a thin sliver of it */
.page-hero.full-bg{ padding:0; min-height: 640px; display:flex; align-items:center; }
.page-hero.full-bg img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 14%;
}
.page-hero.full-bg .wrap{
  position:relative; z-index:2; width:100%; padding: 150px 32px 90px;
}

/* ---------- services list (continues the hero's decorative flow) ---------- */
.service-lines-section{ position:relative; overflow:hidden; }
.service-lines-section::before{
  content:""; position:absolute; top:0; left:32px; width:110px; height:110px; z-index:0;
  background-image: radial-gradient(var(--line) 2.5px, transparent 2.5px);
  background-size: 20px 20px; opacity:.9;
}
.service-lines-section .flow-line{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
.service-lines-section .flow-line path{
  fill:none; stroke: var(--coral); stroke-width:14; stroke-linecap:round; opacity:.22;
}
.service-lines-section .wrap{ position:relative; z-index:1; }

.service-rows{ display:flex; flex-direction:column; }
.service-row{
  display:grid; grid-template-columns: 90px 1fr; gap:30px; padding: 38px 0; border-bottom:1px solid var(--line);
}
.service-row:first-child{ border-top:1px solid var(--line); }
.service-row .num{ font-family: var(--font-head); font-weight:800; font-size:36px; color: var(--coral); }
.service-row h3{ font-size:26px; margin-bottom:10px; }
.service-row p{ max-width:640px; }

/* ---------- packages ---------- */
.packages{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.package{
  border: 1px solid var(--line); border-radius: 22px; padding: 38px 30px; background:#fff;
  display:flex; flex-direction:column; transition: box-shadow .2s ease, transform .2s ease;
}
.package:hover{ transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(0,0,0,.2); }
.package.featured{ background: var(--ink); color:#fff; border-color: var(--ink); }
.package.featured p, .package.featured h3{ color:#fff; }
.package .tier{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--coral); margin-bottom:14px; }
.package h3{ font-size:24px; margin-bottom:14px; }
.package p{ font-size:14.5px; }
.package .pkg-list{ list-style:none; margin:20px 0 0; padding:0; flex:1; }
.package .pkg-list li{
  font-size:14.5px; line-height:1.5; padding-left:24px; position:relative; margin-bottom:10px;
}
.package .pkg-list li::before{
  content:"+"; position:absolute; left:0; top:0; font-weight:700; color: var(--coral);
}
.package.featured .pkg-list li{ color:#fff; }
.package .btn{ margin-top:24px; align-self:flex-start; }

/* ---------- about ---------- */
.about-hero{ display:grid; grid-template-columns: .95fr 1.05fr; gap:60px; align-items:center; }
.about-photo{ border-radius: 24px; overflow:hidden; aspect-ratio: 4/5; background: var(--ink); }
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-hero h1{ font-size: clamp(34px,4.6vw,58px); margin-bottom:16px; }
.about-hero .lead{ font-size:17px; color: var(--ink-soft); }

.about-text{ max-width: 760px; }
.about-text h2{ font-size: clamp(26px,3.2vw,36px); margin-bottom: 22px; }
.about-text p{ font-size:16.5px; }

.values{ display:grid; grid-template-columns: repeat(3,1fr); gap:2px; background: var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.value{ background:#fff; padding:32px 26px; }
.value .n{ font-family: var(--font-head); font-weight:800; color: var(--coral); font-size:13px; letter-spacing:.08em; margin-bottom:14px; display:block; }
.value h4{ font-size:19px; margin-bottom:10px; }
.value p{ font-size:14px; }

/* ---------- contact ---------- */
.contact-head{ max-width:640px; }
.contact-head h1{ font-size: clamp(38px,5.4vw,60px); }
.contact-head .sub{ color: var(--coral); font-weight:600; font-size:18px; margin-top:12px; }
.contact-head p.lead{ margin-top:18px; font-size:16px; }

form.request{ margin-top: 50px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: var(--font-body); font-size:15px; color: var(--ink);
  background: var(--paper-dim); border: 1.5px solid transparent; border-radius: 12px;
  padding: 13px 16px; outline:none; transition: border-color .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--coral); background:#fff; }
.field textarea{ resize:vertical; min-height:110px; }

.check-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.check-toggle{ position:relative; }
.check-toggle input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.check-toggle label{
  display:flex; align-items:center; justify-content:center; text-align:center;
  border:1.5px solid var(--line); border-radius:12px; padding:14px 10px; font-size:13.5px; font-weight:600;
  color: var(--ink-soft); cursor:pointer; transition: all .15s ease;
}
.check-toggle input:checked + label{ border-color: var(--coral); background: rgba(255,95,95,.08); color: var(--coral); }

.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top: 36px; flex-wrap:wrap; }
.form-note{ font-size:13px; color: var(--ink-faint); max-width:360px; }

/* Honeypot: fuera de pantalla, invisible para personas, visible para bots. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-error{
  display:none; margin-top:18px; padding:14px 16px; border-radius:12px;
  border:1.5px solid var(--coral); background: rgba(255,95,95,.08);
  color: var(--coral-dark); font-size:14px; line-height:1.5;
}
.form-error.show{ display:block; }

.btn[disabled]{ opacity:.6; pointer-events:none; }

.form-success{
  display:none; margin-top:50px; border:1.5px solid var(--line); border-radius:18px;
  padding:34px 30px; background: var(--paper-dim);
}
.form-success.show{ display:block; }
.form-success h3{ font-size:22px; margin-bottom:8px; }

.info-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:2px; background: var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top: 60px; }
.info-card{ background:#fff; padding:26px; }
.info-card .eyebrow{ margin-bottom:10px; }
.info-card p{ font-size:15px; font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .intro .grid{ grid-template-columns:1fr; }
  .projects-featured{ grid-template-columns:1fr; }
  .work-grid{ grid-template-columns: repeat(2,1fr); }
  .process{ grid-template-columns: repeat(2,1fr); }
  .about-hero{ grid-template-columns:1fr; }
  .packages{ grid-template-columns:1fr; }
  .values{ grid-template-columns:1fr; }
  .info-strip{ grid-template-columns:1fr; }
  .social-rail{ display:none; }
  .hero{ padding: 50px 0 60px; }
  .hero .glass{ padding: 40px 28px 44px; border-radius:22px; }
  .hero .o1{ width:220px; height:220px; top:-60px; right:-40px; }
  .hero .o4{ width:280px; height:280px; bottom:-130px; left:-90px; }
  .hero .r1, .hero .r2, .hero .o2{ display:none; }
}
@media (max-width: 760px){
  nav.links{
    position:fixed; top:68px; left:0; right:0; height: calc(100vh - 68px);
    background:#fff; flex-direction:column; align-items:flex-start;
    padding: 30px 32px; gap:22px;
    border-top:1px solid var(--line); z-index:90;
    /* hidden when closed: display:none removes it from layout so it can't
       extend the page's horizontal scroll (a fixed element pushed off-screen
       with translateX would, and can't be clipped by an ancestor). */
    display:none;
  }
  nav.links.open{ display:flex; animation: navOpen .22s ease; }
  @keyframes navOpen{ from{ opacity:0; transform: translateY(-6px); } to{ opacity:1; transform:none; } }
  .nav-right{ display:none; }
  .burger{ display:block; }
  .form-grid{ grid-template-columns:1fr; }
  .check-grid{ grid-template-columns: repeat(2,1fr); }
  .work-grid{ grid-template-columns:1fr; }
  .service-row{ grid-template-columns: 50px 1fr; }
  .cta-band{ flex-direction:column; align-items:flex-start; padding: 44px 30px; }
}

/* =====================================================================
   PROJECT CASE-STUDY PAGE  (ataco, and reusable for other projects)
   ===================================================================== */
.project-page{ --accent: var(--coral); --accent-2: var(--coral); }
/* Per-project brand accents */
.project-page.ataco{  --accent: #17A29E; --accent-2: #F0821E; --deep: #1B2FC4; }
.project-page.bravo{  --accent: #E6473F; --accent-2: #F0A93F; --deep: #B5241C; }
.project-page.treeky{ --accent: #E3A72F; --accent-2: #1D1D1B; --deep: #B7841F; }
.project-page.threed{ --accent: #6E4FE0; --accent-2: #FF5F5F; --deep: #4B2FB0; }

/* ---- back link ---- */
.proj-back{ padding: 26px 0 0; }
.proj-back a{ font-family: var(--font-body); font-weight:600; font-size:13.5px; color: var(--ink-soft); display:inline-flex; align-items:center; gap:8px; transition: color .15s ease; }
.proj-back a:hover{ color: var(--accent); }

/* ---- hero ---- */
.proj-hero{ padding: 40px 0 70px; }
.proj-hero .eyebrow{ color: var(--accent); }
.proj-hero .eyebrow::before{ background: var(--accent); }
.proj-hero h1{ font-size: clamp(44px, 7vw, 96px); line-height:0.98; margin: 14px 0 18px; }
.proj-hero .tagline{ font-size: clamp(18px,2.4vw,26px); font-family: var(--font-head); font-weight:600; color: var(--accent-2); margin-bottom: 20px; }
.proj-hero .lead{ max-width: 560px; font-size:17px; }

.proj-meta{ display:flex; gap:0; margin-top:38px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.proj-meta .cell{ padding: 18px 30px 18px 0; margin-right:30px; }
.proj-meta .cell span{ display:block; font-family: var(--font-body); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--ink-faint); margin-bottom:5px; }
.proj-meta .cell b{ font-family: var(--font-head); font-weight:600; font-size:16px; }

/* ===== Treeky scroll-reveal hero =====================================
   The image is pinned (sticky) at the top of the page; a white panel with
   the intro text scrolls up over it, progressively covering the image with
   white + text. Pure CSS drives the cover; a small JS enhancement (script.js)
   fades/rises the text as you scroll and degrades gracefully without JS. */
.treeky-hero{ position: relative; }

.th-media{
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh; min-height: 460px;
  overflow: hidden; background: var(--ink);
}
.th-media img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* subtle darkening so the white overlay reads as it rises */
.th-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 34%, rgba(0,0,0,.14)); pointer-events:none; }

.th-back{
  position:absolute; top: 88px; left: 32px; z-index:3;
  color:#fff; font-family:var(--font-body); font-weight:600; font-size:14px;
  text-decoration:none; text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.th-back:hover{ color: var(--accent); }
.th-scroll{
  position:absolute; bottom: 26px; left:50%; transform:translateX(-50%); z-index:3;
  color:#fff; font-family:var(--font-body); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; text-shadow:0 1px 10px rgba(0,0,0,.45);
  animation: thBounce 1.9s ease-in-out infinite;
}
@keyframes thBounce{ 0%,100%{ transform:translateX(-50%) translateY(0);} 50%{ transform:translateX(-50%) translateY(7px);} }

.th-panel{
  position: relative; z-index: 1; background: #fff;
  padding: clamp(90px, 20vh, 240px) 0 56px;
}
/* soft white gradient just above the panel: whitens the image progressively
   before the solid panel edge reaches it */
.th-panel::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height: 42vh;
  background: linear-gradient(to top, #fff 22%, rgba(255,255,255,0)); pointer-events:none;
}

.th-content .eyebrow{ color: var(--accent); }
.th-content .eyebrow::before{ background: var(--accent); }
.th-content h1{ font-size: clamp(50px, 8.4vw, 112px); line-height:0.95; margin: 14px 0 18px; }
.th-content .tagline{ font-size: clamp(18px,2.4vw,26px); font-family: var(--font-head); font-weight:600; color: var(--accent-2); margin-bottom: 20px; }
.th-content .lead{ max-width: 560px; font-size:17px; }

/* JS enhancement: hide text until scroll reveals it (only when JS is active) */
.treeky-hero.js-anim .th-content{ opacity:0; transform: translateY(42px); will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce){
  .treeky-hero.js-anim .th-content{ opacity:1; transform:none; }
  .th-scroll{ animation:none; }
}

/* ---- full-bleed visual ---- */
.proj-visual{ width:100%; overflow:hidden; }
.proj-visual img{ width:100%; height:auto; display:block; }
.proj-visual.rounded{ border-radius: 24px; }
.proj-visual.tint{ background: var(--accent); }

/* ---- overview (logo + text) ---- */
.proj-overview{ padding: 90px 0; }
.treeky .proj-overview{ padding-top: 64px; }
.proj-overview .grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items:center; }
.proj-logo-card{
  background: var(--paper-dim); border-radius: 24px; padding: 60px 40px;
  display:flex; align-items:center; justify-content:center; aspect-ratio: 1 / 0.9;
}
.proj-logo-card img{ max-width: 78%; height:auto; }
.proj-overview h2{ font-size: clamp(26px,3.4vw,40px); margin-bottom:20px; }
.proj-overview p{ font-size:16.5px; }

/* ---- section that holds a big showcase image ---- */
.proj-section{ padding: 30px 0; }
.proj-section.pad{ padding: 70px 0; }

/* ---- split text block ---- */
.proj-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items:start; padding-block: 70px; }
.proj-split h2{ font-size: clamp(28px,3.6vw,42px); color: var(--accent); }
.proj-split .body p{ font-size:16.5px; }
.proj-split .body p + p{ margin-top: 1.1em; }

/* ---- closing band ---- */
.proj-close{ text-align:center; padding: 100px 0; }
.proj-close h2{ font-size: clamp(30px,5vw,60px); color: var(--accent-2); margin-bottom: 26px; }
.proj-close .btn{ border-color: var(--accent); }
.proj-close .btn:hover{ background: var(--accent); border-color: var(--accent); color:#fff; }

/* ---- next / prev project nav ---- */
.proj-nav{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding: 34px 0 90px; border-top:1px solid var(--line); flex-wrap:wrap; }
.proj-nav a{ font-family: var(--font-head); font-weight:700; font-size: clamp(20px,3vw,30px); color: var(--ink); display:inline-flex; align-items:center; gap:14px; transition: color .15s ease; }
.proj-nav a:hover{ color: var(--accent); }
.proj-nav .lbl{ font-family: var(--font-body); font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--ink-faint); display:block; margin-bottom:6px; }

@media (max-width: 860px){
  .proj-overview .grid{ grid-template-columns:1fr; gap:36px; }
  .proj-split{ grid-template-columns:1fr; gap:22px; padding-block:50px; }
  .proj-logo-card{ aspect-ratio: 16 / 10; }
}

/* ---- tinted hero (colored full-width band) ---- */
.proj-hero.tinted{
  position:relative; overflow:hidden; color:#fff; padding: 110px 0 90px;
  background: var(--accent);
}
.proj-hero.tinted.dark{ background: var(--ink); }
.proj-hero.tinted::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(620px 460px at 85% 15%, rgba(255,255,255,.18), transparent 60%);
}
.proj-hero.tinted .wrap{ position:relative; z-index:2; }
.proj-hero.tinted .eyebrow, .proj-hero.tinted .eyebrow::before{ color:#fff; background:#fff; }
.proj-hero.tinted .eyebrow{ background:transparent; }
.proj-hero.tinted h1{ color:#fff; }
.proj-hero.tinted .tagline{ color:#fff; opacity:.92; }
.proj-hero.tinted .lead{ color: rgba(255,255,255,.85); }
.proj-hero.tinted .proj-meta{ border-color: rgba(255,255,255,.28); }
.proj-hero.tinted .proj-meta .cell span{ color: rgba(255,255,255,.7); }
.proj-hero.tinted .proj-meta .cell b{ color:#fff; }

/* ---- picante / stat badge ---- */
.proj-badge{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:120px; height:120px; border-radius:50%; border:2px solid currentColor;
  font-family: var(--font-head); line-height:1; text-align:center; flex-shrink:0;
}
.proj-badge b{ font-size:26px; font-weight:800; }
.proj-badge span{ font-family: var(--font-body); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-top:4px; }

/* ---- trim the 1px frame baked into some PNG exports ----
   hero-main.png, logo-scene.png and summer-room.png ship with a 1px border of
   rgba(51,51,51,.63) on their outer pixels — an export artifact. Stretched to
   full width it renders as a dark hairline across the page (most visible where
   two image bands meet). Clip it off with PERCENTAGES: they resolve against the
   rendered box, so the same rule trims exactly one source pixel at any viewport
   width. The largest ratio here is 1/1141 ≈ 0.088%, hence 0.12% with headroom.
   Only white sits behind the clipped edge (--paper), so nothing shows through.
   Delete this class from an image once its asset is re-exported clean. */
.trim-frame{ clip-path: inset(0.12% 0.1%); }

/* ---- full-bleed image band (edge to edge, e.g. bravo hero & pattern) ---- */
.bravo-bleed{ width:100%; overflow:hidden; }
.bravo-bleed img{ width:100%; height:auto; display:block; }
.bravo-bleed.pattern{ background: var(--paper); margin: 10px 0 0; }

/* ---- Mexican food: text overlaid on the doodle / mortar band ----
   pattern.png is 1280x1047 (aspect 81.8%). Its usable white zone is the
   TOP-LEFT: the doodle band owns the bottom ~35% and the mortar owns the
   top-right ~30% of the width.

   The image is pinned to the BOTTOM of the section and the copy sits in
   normal flow above it, so the layout never overflows: if the text needs
   more room than the image's white zone offers (narrow windows, where the
   image shrinks but the text stays legible), the SECTION grows and the extra
   space is plain white above the pattern — visually identical, because the
   top of the artwork is white anyway. The band and the copy keep the exact
   same relationship at every width; only the white headroom changes.

   min-height keeps the section at the image's natural height so wide screens
   render the original composition untouched. */
.bravo-mexican{
  position:relative; overflow:hidden;
  background: var(--paper);
  min-height: 81.8vw;                 /* pattern.png height at width:100% */
  padding-bottom: 34vw;               /* reserve the doodle band */
  box-sizing: border-box;
}
.bravo-mexican .mx-bg{
  position:absolute; left:0; right:0; bottom:0;
  display:block; width:100%; height:auto; z-index:0;
}
.bravo-mexican .mx-copy{
  position:relative; z-index:2; padding-top: 6vw; pointer-events:none;
}
.bravo-mexican .mx-copy h2{
  font-family: var(--font-head); font-weight:800; color: var(--ink);
  font-size: clamp(34px, 5.4vw, 96px); line-height:1; text-align:left;
}
.bravo-mexican .mx-copy h2 span{ font-weight:600; font-size:.34em; vertical-align:middle; margin-left:.15em; }
/* the column stays clear of the mortar, which starts at ~70% of the width */
.bravo-mexican .mx-paras{ max-width: min(560px, 52vw); margin: clamp(20px, 3vw, 46px) 0 0; text-align:left; }
.bravo-mexican .mx-paras p{ font-size: clamp(15px, 1.7vw, 21px); font-weight:500; color: var(--ink); line-height:1.5; }
.bravo-mexican .mx-paras p + p{ margin-top: 1.05em; }

/* Tablets / phones: the vw column gets too narrow to read, so widen it and
   hold a legible floor. The section absorbs the extra height on its own. */
@media (max-width: 900px){
  .bravo-mexican{ padding-bottom: 38vw; }
  .bravo-mexican .mx-copy{ padding-top: 34px; }
  .bravo-mexican .mx-paras{ max-width: 64vw; margin-top: 20px; }
  .bravo-mexican .mx-paras p{ font-size: 16px; }
}
@media (max-width: 560px){
  .bravo-mexican{ padding-bottom: 40vw; }
  .bravo-mexican .mx-paras{ max-width: 66vw; }
  .bravo-mexican .mx-paras p{ font-size: 15px; line-height:1.45; }
}

/* ---- decorative food floats (bravo) ---- */
.proj-floats{ position:relative; }
.proj-floats .float{ position:absolute; width:130px; z-index:1; pointer-events:none; opacity:.92; }
.proj-floats .float.a{ top:-10px; left:0; transform: rotate(-12deg); }
.proj-floats .float.b{ bottom:-10px; right:0; width:120px; transform: rotate(10deg); }
.proj-floats > .flavors-copy{ position:relative; z-index:2; text-align:center; max-width:640px; margin:0 auto; }
@media (max-width: 1100px){ .proj-floats .float.a{ left:-10px; } .proj-floats .float.b{ right:-10px; } }

/* ---- edge-to-edge breakout (e.g. bravo sign/cards/cups) ----
   Above 700px (the mobile breakpoint used elsewhere on this page), stretches
   the element to the full viewport width no matter how deep it sits inside
   the centered, padded .wrap. margin-left/right:calc(50% - 50vw) is the
   standard "break out of a container" trick: the 50% resolves against the
   element's own containing block (so it starts from .wrap's edge), and the
   50vw pulls it out to the true screen edge — the two combined land the box
   flush against the viewport regardless of .wrap's max-width. body has
   overflow-x:clip, so any sub-pixel rounding never causes a scrollbar.
   Below 700px this whole block is inactive, so mobile keeps the contained,
   rounded card look untouched. */
@media (min-width: 701px){
  .proj-visual.bleed-lg{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }
  .render-duo.bleed-lg{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .render-duo.bleed-lg .proj-visual{ border-radius: 0; }

  /* cards.png (1280x854) and cups.png (1280x873) are close but not identical
     in aspect ratio — side by side with height:auto that ~2% gap shows up as
     a mismatched bottom edge and a sliver of empty space under the shorter
     one. Force both to the same ratio and crop to fill it, so they read as
     one matched pair. 3/2 sits almost exactly on cards.png's own ratio, so
     it goes essentially untouched; cups.png loses ~2% off top/bottom, well
     inside its background margin. */
  .render-duo.bleed-lg .proj-visual{ aspect-ratio: 3 / 2; }
  .render-duo.bleed-lg .proj-visual img{ height: 100%; object-fit: cover; }
}

/* ---- render duo (3D) ---- */
.render-duo{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items:stretch; }
.render-card{ background: var(--paper-dim); border-radius: 22px; overflow:hidden; padding: 30px; display:flex; align-items:center; justify-content:center; }
.render-card.dark{ background: var(--ink); }
.render-card img{ width:100%; height:auto; }

.render-trio{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.render-trio .render-card{ padding: 26px; }

@media (max-width: 860px){
  .render-duo{ grid-template-columns:1fr; }
  .render-trio{ grid-template-columns:1fr; }
  .proj-floats .float{ display:none; }
}

/* ===========================================================
   3D page — "beyond limits" coral hero
   =========================================================== */
.threed-hero{
  position: relative;
  /* full screen on landscape; on tall/portrait screens cap the height to the
     content so there's no big empty coral band above and below */
  min-height: min(calc(100vh - 62px), calc(55vw + 90px));
  background: var(--coral) url('../3d/BG.png') center top / cover no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
}
/* soft white blob, bottom-left corner */
.threed-hero .th3d-ellipse{
  position: absolute; left: -12%; bottom: -40%;
  width: 27%; max-width: 400px; height: auto;
  z-index: 1; pointer-events: none; user-select: none;
}
.th3d-back{
  position: absolute; top: 26px; left: 34px; z-index: 4;
  color: rgba(255,255,255,.9); font-family: var(--font-body);
  font-weight: 600; font-size: 14px;
}
.th3d-back:hover{ color:#fff; }

.th3d-inner{
  position: relative;
  width: 100%;
  display: flex; align-items: center;
}
.th3d-copy{ position: relative; z-index: 2; width: 100%; padding: 30px 0; }
.th3d-eyebrow{
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(15px, 1.5vw, 22px);
  color:#fff; margin: 0 0 4px;
  padding-left: clamp(24px, 12vw, 180px);
}
.th3d-title{
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(58px, 12vw, 168px);
  line-height: 0.9; letter-spacing: -0.015em;
  color:#fff; margin: 0;
}
.th3d-btn{
  display: inline-block;
  margin: clamp(24px, 3.4vw, 44px) 0 0 clamp(24px, 12vw, 180px);
  padding: 15px 46px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9); color:#fff;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.th3d-btn:hover{ background:#fff; color: var(--coral); border-color:#fff; }

.th3d-robot{
  position: absolute; z-index: 3; top: 50%; right: auto;
  /* Anchor the robot's left edge just past the "d" of "beyond".
     The title width scales with the font (~3.86em for "beyond"), so tying
     `left` to the same clamp keeps the overlap constant at every width. */
  left: calc(3.185 * clamp(58px, 12vw, 168px) + 32px);
  transform: translateY(-44%);
  width: clamp(200px, 40vw, 600px); height: auto;
  filter: drop-shadow(0 28px 46px rgba(0,0,0,.18));
}

/* Only stack the hero on real phones — keep the left-aligned, robot-over-the-"d"
   composition through tablet widths so it doesn't "jump" to centered on resize. */
@media (max-width: 560px){
  .threed-hero{ display: block; min-height: auto; padding: 20px 0 48px; text-align: center; }
  .th3d-back{ position: static; display: inline-block; margin: 0 0 4px; text-align: left; width: 100%; }
  .th3d-inner{ flex-direction: column; }
  .th3d-robot{
    position: static; left: auto; transform: none; order: 1; animation: none;
    width: clamp(190px, 62vw, 300px); margin: 0 auto -10px;
  }
  .th3d-copy{ order: 2; width: 100%; padding: 0; text-align: center; }
  .th3d-eyebrow{ padding-left: 0; text-align: center; }
  .th3d-title{ text-align: center; }
  .th3d-btn{ margin-left: 0; }
  .threed-hero .th3d-ellipse{ display: none; }
}

/* ===========================================================
   3D page — Summer room case (big title behind clay render)
   =========================================================== */
.sr-section{ padding: 64px 0 0; overflow: hidden; }
.sr-tag{
  text-align: center; margin: 0 0 4px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--coral);
}
.sr-stage{ position: relative; width: min(1500px, 94vw); margin: 0 auto; }
.sr-bigtitle{
  position: absolute; top: 15%; left: 50%; transform: translate(-50%, -50%);
  margin: 0; width: 100%; text-align: center; z-index: 1; pointer-events: none;
  white-space: nowrap;
  font-family: var(--font-head); font-weight: 800; line-height: .9;
  font-size: clamp(40px, 10.4vw, 150px); letter-spacing: -.02em;
  text-transform: lowercase; color: #3A3D44; opacity: .85;
}
.sr-clay{ position: relative; z-index: 2; width: 100%; height: auto; display: block; }

/* Magic cabin — coral title above the short render strip, roofs overlap its base */
.mc-title{ color: var(--coral); opacity: .95; }
.mc-section .sr-stage{ margin-top: 58px; }
.mc-section .sr-bigtitle{ top: 3%; }

/* Full-screen cabin scene */
.cabin-full{
  width: 100vw; margin-left: calc(50% - 50vw);
  overflow: hidden; line-height: 0;
}
.cabin-full img{
  width: 100%; height: 100vh;
  object-fit: cover; object-position: center;
  display: block;
}
/* On smaller / portrait screens fit the whole scene to the screen width
   (scales down) instead of staying at desktop scale and cropping. */
@media (max-width: 760px), (max-aspect-ratio: 4/5){
  .cabin-full img{ height: auto; }
}
.sr-desc{
  max-width: 640px; margin: 12px auto 0; text-align: center;
  color: var(--ink-soft); font-size: 16px;
}
.sr-photo{ margin-top: 36px; }

/* ===========================================================
   Ataco — full-bleed editorial layout
   The branding artwork is the page background: the copy is laid
   over it at PERCENTAGE positions, so text and artwork scale
   together at any window width and the text always lands in the
   same white gaps of the illustration.

   IMPORTANT — every metric of the overlay (font sizes, widths,
   margins, the logo) is expressed in `vw`, with NO px floors or
   caps. That is what locks the composition: the artwork's white
   bands are a fixed PERCENTAGE of the image, so the moment any
   text metric freezes at a px value while the image keeps
   shrinking, the copy stops fitting the band and spills onto the
   doodles. Pure vw keeps the whole layout proportional, so it is
   pixel-for-pixel the same composition at 1920px and at 375px.
   Do not reintroduce clamp()/min() px bounds here.
   =========================================================== */
.ataco-hero{
  width:100%; overflow:hidden; background: var(--paper); line-height:0; padding:0;
}
/* Always show the whole wide graphic and let it scale fluidly with the
   viewport width — never crop it, at any screen size. */
.ataco-hero img{ width:100%; height:auto; display:block; }

.ataco-branding{ position:relative; width:100%; overflow:hidden; line-height:0; padding:0; }
.ataco-branding > img.bg{ display:block; width:100%; height:auto; }

/* an overlay band = a safe white zone of the artwork, content centered in it */
.ataco-layer{
  position:absolute; left:0; right:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  text-align:center; line-height:1.5; padding:0 4vw;
}
.ataco-layer .inner{ width:100%; }

/* The two bands below are the clean white zones of branding.gif, measured on
   the artwork itself (centre column): 10.2%–38.4% above the blue scribble and
   43.9%–58.8% below it. Keep the copy inside them or it hits the doodles. */
.ataco-layer.intro{ top:11%; height:26%; }
/* below the blue scribble — the scribble itself is the divider */
.ataco-layer.story{ top:44%; height:14.8%; }

/* Accessible heading for pages whose title exists only as artwork */
.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;
}

.ataco-logo{
  width: 21.7vw; height:auto; display:block;
  margin: -3.2vw auto 0;
}
.ataco-intro-copy{
  max-width: 36.1vw; margin: 2.4vw auto 0;
  font-size: 1.18vw;
  line-height:1.55; font-weight:600; color: var(--ink); text-align:justify;
}

.ataco-layer.story h2{
  font-family: var(--font-head); font-weight:700; color: var(--ink);
  font-size: 1.5vw; line-height:1.25;
  max-width: 43.1vw; margin:0 auto;
}
.ataco-layer.story p{
  max-width: 43.1vw; margin: .85vw auto 0;
  font-size: 1.04vw; line-height:1.45; color: var(--ink);
}
.ataco-map{
  width: 5.6vw; height:auto; display:block;
  margin: .9vw auto;
}

/* padding:0 cancels the generic `section{ padding:90px 0 }` — without it a
   90px white band opens up between the branding artwork and the mockups.
   Same reason .ataco-hero and .ataco-branding above both reset it. */
.ataco-mockups{ width:100%; overflow:hidden; line-height:0; padding:0; }
.ataco-mockups img{ width:100%; height:auto; display:block; }

/* No breakpoint switches the overlay off: the copy stays locked to the
   artwork at every width. Only the hero height adapts, since a 100vh
   photo band is too tall on a phone in portrait. */


/* ===========================================================
   GLASS SYSTEM — site-wide. The light glassmorphism introduced
   in the home hero now carries across every page.
   Project case-study pages (bravo / treeky / ataco / threed)
   only pick up the ambient background: their art-directed
   heroes and full-bleed imagery are deliberately left alone.
   =========================================================== */
body{ background: linear-gradient(180deg, #FBF9F8 0%, #F7F3F1 45%, #F1ECE9 100%); }

/* shared frosted-panel recipe */
.intro .grid,
.page-hero .wrap,
.process-step,
.cta-band,
.package,
.value,
.info-card,
.form-success,
.service-rows{
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.32));
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 30px 70px rgba(120,60,50,.16), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ambient coral glows drifting down the page, echoing the hero */
main{ position:relative; }
main::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 20% at 92% 14%, rgba(255,95,95,.13), transparent 62%),
    radial-gradient(42% 18% at 4%  42%, rgba(255,95,95,.11), transparent 62%),
    radial-gradient(50% 20% at 86% 68%, rgba(255,95,95,.12), transparent 62%),
    radial-gradient(44% 18% at 10% 90%, rgba(255,95,95,.10), transparent 62%);
}
main > section{ position:relative; z-index:1; }
/* the alternating grey band is replaced by the page-wide gradient */
section.dim{ background: transparent; }

/* ---- page hero (services / about): the wrap itself is the panel ---- */
.page-hero{ background: transparent; }
.page-hero .wrap{ border-radius:28px; padding: 54px 46px 58px; }
/* the full-bleed variant keeps its photo, the panel floats centred on top —
   wider and more see-through so it matches the frosted glass on the home hero */
.page-hero.full-bg .wrap{
  width:100%; max-width: min(1340px, 94vw); margin:0 auto; padding: 54px 46px 58px;
  background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.22));
}
.page-hero.full-bg img.bg{ opacity:.75; }

/* ---- intro / showreel on a frosted panel ---- */
.intro .grid{ border-radius:28px; padding: 46px 46px 50px; }
.showreel{ box-shadow: 0 26px 55px rgba(120,60,50,.24); }
.intro .btn{
  border-color: rgba(0,0,0,.20); background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.intro .btn:hover{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---- project cards lift off the gradient ---- */
.project-card{
  box-shadow: 0 26px 55px rgba(120,60,50,.18);
  border: 1px solid rgba(255,255,255,.55);
}

/* ---- process steps become glass cards ---- */
.process-step{
  border-top:none; padding: 30px 28px 32px; border-radius:22px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.process-step:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(120,60,50,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.process-step .num{ color: rgba(255,95,95,.55); }

/* ---- services list on one long panel ---- */
.service-rows{ border-radius:28px; padding: 8px 40px; }
.service-row{ border-bottom-color: rgba(0,0,0,.08); }
.service-row:first-child{ border-top:none; }
.service-row:last-child{ border-bottom:none; }

/* ---- pricing packages ---- */
.package{ border-radius:22px; }
/* the featured tier stays dark — it is the one deliberate contrast */
.package.featured{
  background: var(--ink); border-color: var(--ink);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow: 0 30px 70px rgba(20,16,15,.28);
}

/* ---- values / info cards: hairline grid becomes floating cards ---- */
.values, .info-strip{
  background:transparent; border:none; border-radius:0; overflow:visible; gap:22px;
}
.value, .info-card{ border-radius:22px; padding:32px 26px; }
.info-card{ padding:26px; }

/* ---- contact form ---- */
.field input, .field select, .field textarea{
  background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: var(--coral); background: rgba(255,255,255,.85);
}
.check-toggle label{
  border-color: rgba(0,0,0,.10); background: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.check-toggle input:checked + label{ border-color: var(--coral); background: rgba(255,95,95,.12); }
.form-success{ border-radius:22px; border:1px solid rgba(255,255,255,.75); }

/* ---- CTA band: glass panel floating over its own orbs ---- */
.cta-band{ color: var(--ink); }
.cta-band h2{ color: var(--ink); }
.cta-band p{ color: var(--ink-soft); }
.cta-band .eyebrow{ color:#C42D18; }
.cta-band .eyebrow::before{ background:#C42D18; }
.cta-section{ position:relative; overflow:hidden; }
.cta-section .wrap{ z-index:2; }
.cta-section .c1{ width:230px; height:230px; top:-70px; right:8%; }
.cta-section .c2{ width:120px; height:120px; bottom:6%; left:6%; }
.cta-section .c3{ width:170px; height:170px; bottom:-40px; right:26%; transform: rotate(-25deg); }

@media (max-width: 980px){
  .intro .grid{ padding: 34px 26px 38px; border-radius:22px; }
  .page-hero .wrap, .page-hero.full-bg .wrap{ padding: 38px 26px 42px; border-radius:22px; }
  .service-rows{ padding: 6px 24px; }
  .cta-section .c2, .cta-section .c3{ display:none; }
}
@media (max-width: 620px){
  /* two glass cards side by side get too narrow once they carry padding */
  .process{ grid-template-columns:1fr; }
  .process-step{ padding: 24px 22px 26px; }
  .cta-band{ padding: 40px 28px 44px; }
}