
:root{
  --navy:#0b1017;
  --navy-2:#111822;
  --ivory:#eee9df;
  --paper:#f6f3ed;
  --ink:#111111;
  --gold:#a47b3b;
  --line:rgba(255,255,255,.16);
  --muted:rgba(255,255,255,.68);
  --max:1500px;
  --pad:clamp(20px,4vw,64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy);
  color:white;
  font-family:"Inter",Arial,sans-serif;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

.noise{
  position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

/* HEADER */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:100;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:22px var(--pad);color:white;
}
.brand-logo{display:flex;align-items:center;width:52px;height:64px;opacity:.96}
.brand-logo img{width:100%;height:100%;object-fit:contain}
.header-cta{justify-self:end;font-size:11px;letter-spacing:.18em;font-weight:600;text-transform:uppercase}
.nav{display:flex;gap:30px}
.nav a{font-size:10px;letter-spacing:.18em;text-transform:uppercase;transition:opacity .2s ease}
.nav a:hover{opacity:.58}

/* HERO */
.hero{position:relative;min-height:100svh;overflow:hidden;background:#06090d}
.hero-picture{position:absolute;inset:0}
.hero-media{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.025)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.13),rgba(0,0,0,.02) 62%),linear-gradient(to bottom,rgba(0,0,0,.15),transparent 42%,rgba(0,0,0,.50))}
.hero-content{
  position:relative;z-index:2;min-height:100svh;padding:126px var(--pad) 34px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.eyebrow{margin:0;font-size:10px;letter-spacing:.28em;text-transform:uppercase}
.hero-eyebrow{max-width:52%;opacity:.86}
.hero-title{
  width:min(47vw,720px);margin:auto 0 auto 1vw;
  font-family:"Space Grotesk",Arial,sans-serif;
  font-size:clamp(80px,10vw,175px);line-height:.78;letter-spacing:.055em;font-weight:600;
  text-shadow:0 8px 40px rgba(0,0,0,.35);
}
.hero-line{display:block}
.hero-line-offset{margin-left:4.8vw}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.hero-bottom p{margin:0}.scroll-cue{opacity:.72}

.section-index{font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.62}
.section-light{color:var(--ink)}

/* ABOUT */
.manifesto{position:relative;background:var(--paper);padding:40px var(--pad) 0}
.manifesto-grid{max-width:var(--max);margin:0 auto;padding:140px 0 86px;display:grid;grid-template-columns:1.35fr .65fr;gap:8vw;align-items:end}
.display-heading{margin:0;font-family:"Space Grotesk",sans-serif;font-size:clamp(52px,7.4vw,132px);line-height:.92;letter-spacing:-.018em;font-weight:600}
.display-heading span{color:var(--gold)}
.manifesto-copy{max-width:540px;font-size:clamp(15px,1.1vw,19px);line-height:1.72}
.manifesto-copy p{margin:0 0 22px}
.manifesto-media{max-width:var(--max);margin:0 auto 115px;position:relative;overflow:hidden;aspect-ratio:16/8.5;background:#161616}
.manifesto-media img{width:100%;height:100%;object-fit:cover;object-position:center 48%;transition:transform .8s cubic-bezier(.2,.65,.2,1)}
.manifesto-media:hover img{transform:scale(1.015)}
.manifesto-media figcaption,.experience-media figcaption,.studio-detail figcaption{position:absolute;left:18px;bottom:18px;margin:0;font-size:9px;letter-spacing:.22em;color:rgba(255,255,255,.78);background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.22);padding:8px 10px;backdrop-filter:blur(8px)}
.ticker{border-top:1px solid rgba(0,0,0,.2);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;gap:28px;align-items:center;padding:25px 0 28px;min-width:max-content;animation:ticker 26s linear infinite;font-family:"Space Grotesk",sans-serif;font-size:clamp(28px,4vw,64px);font-weight:600;letter-spacing:.04em}
.ticker-track i{font-style:normal;color:var(--gold)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* SERVICES */
.services{position:relative;padding:40px var(--pad) 115px;overflow:hidden}
.services-intro{max-width:var(--max);margin:0 auto;padding:115px 0 72px;position:relative;z-index:2}
.services-intro h2{margin:25px 0 0;max-width:1040px;font-family:"Space Grotesk",sans-serif;font-size:clamp(46px,5.8vw,102px);line-height:1;letter-spacing:-.015em;font-weight:500}
.services-layout{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:.94fr 1.06fr;gap:4vw;align-items:stretch;position:relative}
.service-list{border-top:1px solid var(--line);position:relative;z-index:5;align-self:center}
.service-row{width:100%;display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:18px;padding:24px 0;color:white;background:transparent;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;transition:opacity .25s ease}
.service-row span{font-size:10px;letter-spacing:.16em;opacity:.55}
.service-row strong{font-family:"Space Grotesk",sans-serif;font-size:clamp(38px,4.5vw,78px);letter-spacing:.035em;font-weight:500}
.service-row em{font-style:normal;font-size:26px;transform:translate(-8px,8px);opacity:0;transition:.25s ease}
.service-list:has(.service-row:hover) .service-row:not(:hover){opacity:.28}
.service-row:hover em,.service-row.is-active em{transform:translate(0,0);opacity:1}
.service-visual{min-height:650px;position:relative;overflow:visible}
.service-mic{position:absolute;width:min(58vw,890px);max-width:none;right:-15vw;top:0;filter:drop-shadow(0 30px 35px rgba(0,0,0,.35));transform-origin:center;transition:transform .7s cubic-bezier(.2,.65,.2,1)}
.service-visual:hover .service-mic{transform:translateX(-10px) rotate(-.8deg)}
.service-copy{position:absolute;right:0;bottom:0;width:min(78%,510px);background:var(--ivory);color:var(--ink);padding:25px 30px;z-index:3}
.service-copy span{display:block;margin-bottom:10px;font-size:9px;letter-spacing:.24em;color:var(--gold)}
.service-copy p{margin:0;line-height:1.6}

/* EXPERIENCE */
.experience{background:var(--ivory);color:var(--ink);padding:40px var(--pad) 120px}
.experience-head{max-width:var(--max);margin:0 auto;padding:105px 0 70px;display:grid;grid-template-columns:.32fr 1fr;gap:6vw;align-items:start}
.experience-head .eyebrow{color:var(--gold);padding-top:12px}
.experience-head h2{margin:0;font-family:"Space Grotesk",sans-serif;font-size:clamp(54px,7.2vw,126px);line-height:.9;letter-spacing:-.018em}
.experience-media{position:relative;max-width:var(--max);margin:0 auto 90px;width:72%;margin-left:auto;margin-right:0;aspect-ratio:16/8.8;overflow:hidden;background:#161616}
.experience-media img{width:100%;height:100%;object-fit:cover}
.experience-stack{max-width:var(--max);margin:0 auto;border-top:1px solid rgba(0,0,0,.24)}
.experience-row{display:grid;grid-template-columns:70px 1fr .75fr;gap:4vw;align-items:center;padding:32px 0;border-bottom:1px solid rgba(0,0,0,.24)}
.experience-number{font-size:10px;letter-spacing:.2em;color:var(--gold)}
.experience-row h3{margin:0;font-family:"Space Grotesk",sans-serif;font-size:clamp(42px,5.6vw,90px);line-height:.95;letter-spacing:.025em;font-weight:500;transition:transform .28s ease}
.experience-row p{margin:0;max-width:500px;line-height:1.65}
.experience-row:hover h3{transform:translateX(12px)}

/* STUDIO */
.studio{position:relative;min-height:110svh;overflow:hidden;background:#050505}
.studio-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035)}
.studio-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.22) 60%,rgba(0,0,0,.44)),linear-gradient(to top,rgba(0,0,0,.66),transparent 45%)}
.studio-content{position:relative;z-index:2;min-height:110svh;padding:40px var(--pad) 68px;display:flex;flex-direction:column;justify-content:space-between}
.studio-title{max-width:900px;margin-top:auto;margin-bottom:10px}
.studio-title h2{margin:24px 0 0;font-family:"Space Grotesk",sans-serif;font-size:clamp(62px,8.3vw,140px);line-height:.84;letter-spacing:.01em;font-weight:600}
.studio-detail{position:absolute;right:var(--pad);top:14%;width:min(28vw,420px);aspect-ratio:4/5;margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:0 22px 55px rgba(0,0,0,.28)}
.studio-detail img{width:100%;height:100%;object-fit:cover}

/* PHILOSOPHY */
.philosophy{min-height:100svh;background:var(--gold);color:#17120b;padding:40px var(--pad) 90px;display:flex;flex-direction:column}
.philosophy-copy{margin:auto 0}.philosophy-copy h2{margin:20px 0 0;font-family:"Space Grotesk",sans-serif;font-size:clamp(68px,11vw,190px);line-height:.78;letter-spacing:.015em}.philosophy-copy h2{color:var(--paper)}.philosophy-copy h2 span{color:var(--paper)}
.philosophy-end{margin:34px 0 0;text-align:right;font-size:clamp(24px,3.5vw,58px);font-family:"Space Grotesk",sans-serif;letter-spacing:.08em}

/* CONTACT */
.contact{min-height:96svh;padding:40px var(--pad) 60px;display:flex;flex-direction:column;justify-content:space-between}
.contact-top{padding-top:120px}.contact-top h2{margin:26px 0 0;font-family:"Space Grotesk",sans-serif;font-size:clamp(76px,12vw,205px);line-height:.8;letter-spacing:.025em}
.contact-bottom{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.big-link{display:inline-flex;align-items:center;gap:20px;width:max-content;padding-bottom:10px;border-bottom:1px solid white;font-family:"Space Grotesk",sans-serif;font-size:clamp(26px,4vw,62px);letter-spacing:.08em}
.big-link span{transition:transform .3s ease}.big-link:hover span{transform:translate(8px,-8px)}
.contact-info{font-size:11px;line-height:1.8;text-align:right;opacity:.72;letter-spacing:.06em}.contact-info p{margin:0}
footer{display:flex;justify-content:space-between;padding:18px var(--pad);border-top:1px solid var(--line);background:var(--navy);font-size:9px;letter-spacing:.18em;text-transform:uppercase}

/* REVEAL */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .85s cubic-bezier(.2,.65,.2,1),transform .85s cubic-bezier(.2,.65,.2,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

@media (max-width:1000px){
  .site-header{grid-template-columns:1fr auto}.nav{display:none}
  .manifesto-grid,.services-layout,.experience-head,.contact-bottom{grid-template-columns:1fr}
  .manifesto-grid{padding:105px 0 80px}.manifesto-copy{max-width:100%}
  .services-layout{gap:64px}.service-visual{min-height:560px}
  .service-mic{width:min(94vw,820px);right:-20vw;top:-20px}
  .experience-media{width:100%;margin:0 auto 70px}
  .experience-row{grid-template-columns:50px 1fr}.experience-row p{grid-column:2;max-width:100%}
  .contact-info{text-align:left}
}

@media (max-width:700px){
  :root{--pad:18px}
  .site-header{padding-top:16px;align-items:start}.brand-logo{width:38px;height:48px}.header-cta{font-size:9px;letter-spacing:.15em;margin-top:8px}
  .hero-media{object-position:center top;transform:scale(1.005)}
  .hero-overlay{background:linear-gradient(to bottom,rgba(0,0,0,.18),transparent 40%,rgba(0,0,0,.30) 78%,rgba(0,0,0,.72))}
  .hero-content{padding:86px var(--pad) 28px;justify-content:space-between}
  .hero-eyebrow{display:none}
  .hero-title{position:absolute;top:10.5%;right:5%;width:auto;margin:0;text-align:right;font-size:clamp(54px,17vw,92px);line-height:.82;letter-spacing:.11em;text-shadow:0 6px 24px rgba(0,0,0,.5)}
  .hero-line-offset{margin-left:0;margin-top:.10em}
  .hero-bottom{margin-top:auto;align-items:flex-start;flex-direction:column;font-size:9px;letter-spacing:.19em}.scroll-cue{display:none}

  .section-index{letter-spacing:.2em}
  .display-heading{font-size:clamp(47px,14vw,72px);line-height:.94;letter-spacing:-.005em}
  .manifesto-media{aspect-ratio:4/3;margin-bottom:78px}.manifesto-media img{object-position:center}
  .ticker-track{letter-spacing:.08em}

  .services{padding-bottom:78px}.services-intro{padding:82px 0 58px}.services-intro h2{font-size:clamp(44px,13vw,68px);letter-spacing:0}
  .service-row{grid-template-columns:34px 1fr auto;padding:19px 0}.service-row strong{font-size:clamp(34px,11vw,48px);letter-spacing:.06em}
  .service-visual{min-height:520px;margin-top:6px;overflow:hidden;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .service-mic{width:124vw;right:-52vw;top:26px;max-width:none}
  .service-copy{left:var(--pad);right:auto;bottom:0;width:calc(100% - (var(--pad) * 2));padding:20px 22px}

  .experience{padding-bottom:82px}.experience-head{padding:80px 0 58px}.experience-head h2{font-size:clamp(48px,14vw,66px);line-height:.94;letter-spacing:0}.experience-head .eyebrow{padding-top:0}
  .experience-media{aspect-ratio:4/3;margin-bottom:58px}
  .experience-row{grid-template-columns:34px 1fr;padding:25px 0}.experience-row h3{font-size:clamp(34px,11vw,46px);letter-spacing:.05em}

  .studio,.studio-content{min-height:98svh}.studio-image{object-position:center}.studio-content{padding-bottom:38px}
  .studio-title{margin-bottom:0;max-width:88%}.studio-title h2{font-size:clamp(50px,15vw,70px);line-height:.9;letter-spacing:.03em}
  .studio-detail{top:14%;right:18px;width:42vw;max-width:205px}
  .studio-detail figcaption{font-size:7px;left:10px;bottom:10px;letter-spacing:.16em}

  .philosophy{min-height:86svh}.philosophy-copy h2{font-size:18vw;line-height:.82;letter-spacing:.025em}.philosophy-end{text-align:left;font-size:5.5vw;letter-spacing:.08em}
  .contact{min-height:86svh}.contact-top{padding-top:95px}.contact-top h2{font-size:18vw;line-height:.84;letter-spacing:.035em}
  footer{gap:20px;flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.ticker-track{animation:none}.service-mic,.hero-media,.studio-image{transform:none!important;transition:none!important}
}

  

/* =========================================================
   ORS STUDIO — V6 refinements
   01. Better balance in Experiencia ORS
   02. More readable secondary typography
   03. Services microphone + information card recomposition
   ========================================================= */

/* 02 — secondary typography: slightly larger, same hierarchy */
.nav a{font-size:11px}
.header-cta{font-size:12px}
.eyebrow{font-size:12px}
.hero-bottom{font-size:12px}
.section-index{font-size:12px}
.manifesto-media figcaption,
.experience-media figcaption,
.studio-detail figcaption{font-size:10.5px}
.service-row span{font-size:12px}
.service-copy span{font-size:11px}
.experience-number{font-size:12px}
.contact-info{font-size:13px}
footer{font-size:10.5px}

/* 01 — LA EXPERIENCIA ORS: use more of the left side without losing asymmetry */
.experience-head{
  grid-template-columns:minmax(185px,.22fr) 1fr;
  gap:4vw;
}
.experience-head h2{max-width:1180px}
.experience-media{
  width:88%;
  margin-left:12%;
  margin-right:0;
}

/* 03 — SERVICIOS: card above, microphone further inside the composition */
.services-layout{grid-template-columns:.92fr 1.08fr;gap:3.5vw}
.service-visual{min-height:700px}
.service-mic{
  width:min(53vw,840px);
  right:-7vw;
  top:138px;
}
.service-copy{
  top:0;
  bottom:auto;
  right:0;
  width:min(90%,575px);
  padding:30px 34px;
}
.service-copy p{font-size:17px;line-height:1.65}

@media (max-width:1000px){
  .nav a{font-size:10.5px}
  .header-cta{font-size:11px}
  .eyebrow,.section-index{font-size:11.5px}
  .hero-bottom{font-size:11px}

  .experience-head{grid-template-columns:1fr;gap:28px}
  .experience-media{width:100%;margin-left:auto;margin-right:auto}

  .services-layout{grid-template-columns:1fr;gap:58px}
  .service-visual{min-height:640px}
  .service-copy{left:0;right:auto;top:0;bottom:auto;width:min(90%,590px)}
  .service-mic{width:min(88vw,790px);right:-10vw;top:155px}
}

@media (max-width:700px){
  .header-cta{font-size:10px}
  .eyebrow,.section-index{font-size:11px;letter-spacing:.19em}
  .hero-bottom{font-size:10px}
  .manifesto-media figcaption,
  .experience-media figcaption,
  .studio-detail figcaption{font-size:9px}
  .service-row span,.experience-number{font-size:11px}
  .contact-info{font-size:12px}
  footer{font-size:10px}

  .experience-head{gap:24px}
  .experience-media{width:100%;margin-left:auto;margin-right:auto}

  .service-visual{
    min-height:650px;
    margin-top:8px;
    overflow:hidden;
  }
  .service-copy{
    left:var(--pad);
    right:auto;
    top:0;
    bottom:auto;
    width:calc(100% - (var(--pad) * 2));
    padding:24px 24px;
  }
  .service-copy p{font-size:15px;line-height:1.6}
  .service-mic{
    width:118vw;
    right:-34vw;
    top:190px;
  }
}


/* =========================================================
   ORS STUDIO — V6.1 corrections
   01. Secondary typography increased again for clearer reading
   02. Services information card lifted further away from microphone
   ========================================================= */

/* Secondary typography — more visible while preserving hierarchy */
.nav a{font-size:13px}
.header-cta{font-size:14px}
.eyebrow{font-size:14px}
.hero-bottom{font-size:14px}
.section-index{font-size:14px}
.manifesto-media figcaption,
.experience-media figcaption,
.studio-detail figcaption{font-size:12px}
.service-row span{font-size:14px}
.service-copy span{font-size:13px}
.experience-number{font-size:14px}
.contact-info{font-size:15px}
footer{font-size:12px}

/* Services — create a clear visual gap between card and microphone */
.service-copy{
  top:-46px;
  bottom:auto;
  width:min(92%,610px);
  padding:32px 36px;
}
.service-copy p{font-size:18px;line-height:1.65}
.service-mic{
  width:min(54vw,860px);
  right:-6vw;
  top:205px;
}
.service-visual{min-height:735px}

@media (max-width:1000px){
  .nav a{font-size:12px}
  .header-cta{font-size:13px}
  .eyebrow,.section-index{font-size:13px}
  .hero-bottom{font-size:12px}
  .service-row span,.experience-number{font-size:13px}
  .contact-info{font-size:14px}

  .service-visual{min-height:700px}
  .service-copy{top:-34px;width:min(92%,620px)}
  .service-mic{width:min(90vw,810px);right:-8vw;top:205px}
}

@media (max-width:700px){
  .header-cta{font-size:11.5px}
  .eyebrow,.section-index{font-size:12.5px;letter-spacing:.18em}
  .hero-bottom{font-size:11.5px}
  .manifesto-media figcaption,
  .experience-media figcaption,
  .studio-detail figcaption{font-size:10.5px}
  .service-row span,.experience-number{font-size:12.5px}
  .service-copy span{font-size:12px}
  .contact-info{font-size:13.5px}
  footer{font-size:11px}

  .service-visual{min-height:690px}
  .service-copy{
    top:-24px;
    width:calc(100% - (var(--pad) * 2));
    padding:25px 24px;
  }
  .service-copy p{font-size:16px}
  .service-mic{width:118vw;right:-32vw;top:225px}
}

/* =========================================================
   ORS STUDIO — V6.1 MOBILE parity pass
   Mirrors the approved desktop corrections on small screens.
   ========================================================= */
@media (max-width:700px){
  /* Secondary system: readable on mobile, still secondary */
  .nav a{font-size:13px}
  .header-cta{font-size:13px}
  .eyebrow,.section-index{font-size:14px;letter-spacing:.18em;line-height:1.45}
  .hero-bottom{font-size:13px;letter-spacing:.18em}
  .manifesto-media figcaption,
  .experience-media figcaption,
  .studio-detail figcaption{font-size:12px;line-height:1.35}
  .service-row span,.experience-number{font-size:14px}
  .service-copy span{font-size:13px}
  .contact-info{font-size:15px;line-height:1.55}
  footer{font-size:12px}

  /* Experience: remove the desktop-side bias and use the mobile width intentionally */
  .experience-head{
    grid-template-columns:1fr;
    gap:30px;
    padding:78px 0 48px;
  }
  .experience-head .eyebrow{padding-top:0;max-width:100%}
  .experience-head h2{
    width:100%;
    max-width:none;
    font-size:clamp(46px,13vw,64px);
    line-height:.95;
  }
  .experience-media{
    width:100%;
    margin:0 auto 58px;
    aspect-ratio:4/3;
  }

  /* Services: card clearly above the microphone, microphone further inside */
  .service-visual{
    min-height:760px;
    margin-top:26px;
    overflow:hidden;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1);
  }
  .service-copy{
    left:var(--pad);
    right:auto;
    top:0;
    bottom:auto;
    width:calc(100% - (var(--pad) * 2));
    padding:27px 24px;
    z-index:4;
  }
  .service-copy p{font-size:17px;line-height:1.65}
  .service-mic{
    width:112vw;
    max-width:none;
    right:-18vw;
    top:250px;
  }
}

@media (max-width:430px){
  .service-visual{min-height:720px}
  .service-mic{width:116vw;right:-21vw;top:255px}
  .service-copy p{font-size:16.5px}
}

/* =========================================================
   ORS STUDIO — V6.2 MOBILE containment fix
   - Desktop remains untouched.
   - Microphone keeps its approved mobile scale and moves left.
   - Long display text is constrained to the mobile viewport.
   ========================================================= */
@media (max-width:700px){
  /* Keep every mobile text block inside its intended content width. */
  .services-intro,
  .service-list,
  .service-copy,
  .experience-head,
  .experience-stack,
  .studio-title,
  .philosophy-copy,
  .contact-top,
  .contact-bottom{
    min-width:0;
    max-width:100%;
  }

  .display-heading,
  .services-intro h2,
  .service-row strong,
  .experience-head h2,
  .experience-row h3,
  .studio-title h2,
  .philosophy-copy h2,
  .philosophy-end,
  .contact-top h2,
  .big-link,
  .contact-info{
    max-width:100%;
  }

  /* SERVICIOS — same scale, shifted inward/left. */
  .service-mic{
    width:112vw;
    right:-8vw;
    top:250px;
  }

  /* FILOSOFÍA — preserve the oversized look without allowing overflow. */
  .philosophy{
    width:100%;
    overflow:hidden;
  }
  .philosophy-copy{
    width:100%;
  }
  .philosophy-copy h2{
    width:100%;
    font-size:clamp(44px,13vw,58px);
    line-height:.86;
    letter-spacing:.005em;
    overflow-wrap:normal;
    word-break:normal;
  }
  .philosophy-end{
    width:100%;
    font-size:clamp(20px,5.2vw,27px);
    line-height:1.08;
    letter-spacing:.055em;
    overflow-wrap:normal;
    word-break:normal;
  }

  /* CONTACT — keep the large title and CTA inside the same side margins. */
  .contact-top h2{
    font-size:clamp(44px,12.8vw,60px);
    line-height:.88;
    letter-spacing:.015em;
  }
  .big-link{
    width:100%;
    justify-content:space-between;
    font-size:clamp(24px,7vw,34px);
  }
}

@media (max-width:430px){
  .service-mic{
    width:116vw;
    right:-9vw;
    top:255px;
  }
}

/* =========================================================
   ORS STUDIO — V6.3 MOBILE studio-title spacing
   Keeps every V6.2 correction intact; desktop untouched.
   Gives EL ESTUDIO headline more breathing room on phones.
   ========================================================= */
@media (max-width:700px){
  .studio-title{
    width:100%;
    max-width:100%;
    padding-right:18px;
    box-sizing:border-box;
  }
  .studio-title h2{
    max-width:100%;
    font-size:clamp(46px,13vw,60px);
    line-height:.92;
    letter-spacing:.02em;
    overflow-wrap:normal;
    word-break:normal;
  }
}

@media (max-width:430px){
  .studio-title{
    padding-right:22px;
  }
  .studio-title h2{
    font-size:clamp(45px,12.8vw,56px);
  }
}
