:root { --eclipse:#353148; --doe:#b98e68; --fudge:#493a35; --coconut:#f1eee6; --silver:#d2cfc4; --white-line:rgba(241,238,230,.2); --dark-line:rgba(53,49,72,.22); --header-h:82px; --pad:clamp(1.25rem,5vw,5.5rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--eclipse); background:var(--coconut); font-family:"Questrial",sans-serif; font-size:1rem; line-height:1.55; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:"Outfit",sans-serif; font-weight:400; line-height:1.02; letter-spacing:-.04em; }
.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; }
.hidden-field { display:none; }
.site-header { position:fixed; z-index:50; inset:0 0 auto; height:var(--header-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); color:var(--coconut); border-bottom:1px solid transparent; transition:background .25s ease,border-color .25s ease; }
.site-header.scrolled { background:rgba(53,49,72,.94); border-color:var(--white-line); backdrop-filter:blur(16px); }
.brand { display:inline-flex; align-items:center; width:8.6rem; white-space:nowrap; }
.brand img { display:block; width:100%; height:auto; }
.main-nav { display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); font-size:.82rem; }
.main-nav a { padding:.55rem 0; opacity:.7; border-bottom:1px solid transparent; transition:opacity .2s ease,border-color .2s ease; }
.main-nav a:hover,.main-nav a:focus-visible { opacity:1; border-color:var(--doe); }
.menu-toggle { display:none; width:2.5rem; height:2.5rem; color:inherit; background:none; border:0; }
.menu-toggle span:not(.sr-only) { display:block; width:1.5rem; height:1px; margin:.4rem auto; background:currentColor; }
.strategy-axis { position:fixed; z-index:40; top:50%; right:1.1rem; display:grid; grid-template-columns:auto 1px auto; gap:.7rem; height:18rem; color:white; mix-blend-mode:difference; transform:translateY(-50%); }
.strategy-axis>p { display:flex; flex-direction:column; justify-content:space-between; margin:0; writing-mode:vertical-rl; transform:rotate(180deg); font-size:.62rem; letter-spacing:.15em; text-transform:uppercase; }
.strategy-axis>p span:first-child { font-weight:600; }
.axis-track { position:relative; width:1px; background:rgba(255,255,255,.3); }
.axis-track span { position:absolute; inset:0 0 auto; height:14.28%; background:currentColor; transition:height .4s ease; }
.axis-points { display:flex; flex-direction:column; justify-content:space-between; }
.axis-points a { display:grid; place-items:center; width:1.55rem; aspect-ratio:1; border:1px solid transparent; border-radius:50%; font-size:.57rem; opacity:.4; }
.axis-points a.active { border-color:currentColor; opacity:1; }
section { position:relative; min-height:90vh; padding:clamp(7rem,11vw,10rem) var(--pad); }
.dark { color:var(--coconut); background:var(--eclipse); }
.light { background:var(--coconut); }
.silver { background:var(--silver); }
.cocoa { color:var(--coconut); background:var(--fudge); }
.accent { color:var(--eclipse); background:var(--doe); }
.section-label,.eyebrow,.kicker { margin:0; text-transform:uppercase; letter-spacing:.15em; font-family:"Outfit",sans-serif; font-size:.72rem; font-weight:500; }
.section-label { opacity:.64; }
.kicker,.eyebrow { color:var(--doe); }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:2.2rem; min-width:13rem; padding:1rem 1.15rem; cursor:pointer; border:1px solid transparent; font-family:"Outfit",sans-serif; font-weight:500; transition:color .2s ease,background .2s ease,border-color .2s ease; }
.button-icon { flex:0 0 auto; width:1.15rem; height:1.15rem; overflow:visible; }
.button-accent { color:var(--eclipse); background:var(--doe); }
.button-accent:hover,.button-accent:focus-visible { color:var(--doe); background:transparent; border-color:var(--doe); }
.hero { min-height:100svh; display:flex; align-items:center; padding-top:calc(var(--header-h) + 3rem); overflow:hidden; }
.hero-copy { position:relative; z-index:3; width:min(72rem,82vw); }
.hero .eyebrow { margin-bottom:clamp(2rem,4vw,4rem); }
.hero h1 { max-width:13ch; margin-bottom:2rem; font-size:clamp(3.2rem,7.4vw,7.6rem); }
.hero h1 em { color:var(--doe); font-style:normal; }
.hero-lead { max-width:39rem; margin-bottom:2.5rem; color:rgba(241,238,230,.68); font-size:clamp(1.05rem,1.5vw,1.28rem); }
.hero-wordmark { position:absolute; right:-1vw; bottom:-5vw; color:rgba(241,238,230,.035); font:400 clamp(10rem,27vw,29rem) "Gilda Display",serif; letter-spacing:-.06em; }
.hero-foot { position:absolute; right:var(--pad); bottom:2rem; left:var(--pad); display:flex; justify-content:flex-end; gap:2rem; padding-top:1rem; border-top:1px solid var(--white-line); color:rgba(241,238,230,.5); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; }
.diamond-cascade { position:absolute; z-index:1; top:12%; right:5%; width:min(32vw,29rem); aspect-ratio:1; opacity:.75; }
.diamond-cascade i { position:absolute; width:22%; aspect-ratio:1; border:1px solid rgba(185,142,104,.6); transform:rotate(45deg); animation:diamond-breathe 6s ease-in-out infinite; }
.diamond-cascade i:nth-child(1){top:0;right:0}.diamond-cascade i:nth-child(2){top:18%;right:18%;animation-delay:-.6s}.diamond-cascade i:nth-child(3){top:36%;right:36%;animation-delay:-1.2s}.diamond-cascade i:nth-child(4){top:18%;right:-18%;animation-delay:-1.8s}.diamond-cascade i:nth-child(5){top:36%;right:0;animation-delay:-2.4s}.diamond-cascade i:nth-child(6){top:54%;right:18%;animation-delay:-3s}.diamond-cascade i:nth-child(7){top:36%;right:-36%;animation-delay:-3.6s}.diamond-cascade i:nth-child(8){top:54%;right:-18%;animation-delay:-4.2s}.diamond-cascade i:nth-child(9){top:72%;right:0;animation-delay:-4.8s}
.about { display:grid; grid-template-columns:1fr; align-content:start; }
.about-copy { width:100%; margin-top:3.5rem; }
.about h2 { max-width:19ch; margin:0; font-size:clamp(3rem,6.4vw,6.7rem); }
.about-statement { max-width:56rem; margin:2.5rem 0 0; padding:0; color:rgba(53,49,72,.72); font-size:clamp(1.05rem,1.45vw,1.24rem); }
.about-statement p { margin-bottom:0; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); margin-top:4.5rem; border-top:1px solid var(--dark-line); border-bottom:1px solid var(--dark-line); }
.metrics div { min-height:11rem; display:flex; flex-direction:column; justify-content:space-between; padding:1.5rem; border-right:1px solid var(--dark-line); }
.metrics div:last-child { border-right:0; }
.metrics strong { font:300 clamp(2.5rem,5vw,5rem) "Outfit",sans-serif; letter-spacing:-.05em; }
.metrics span { max-width:10rem; color:rgba(53,49,72,.62); font-size:.84rem; }
.director { display:grid; grid-template-columns:.85fr 1.3fr; gap:clamp(3rem,8vw,9rem); align-items:center; }
.director-portrait { position:relative; width:100%; max-width:31rem; margin:0; padding:1.15rem 1.15rem 0; aspect-ratio:.86; overflow:hidden; background:linear-gradient(145deg,#403b59 0%,var(--eclipse) 52%,#2b283b 100%); border:1px solid rgba(241,238,230,.42); box-shadow:1.2rem 1.2rem 0 rgba(185,142,104,.16); }
.director-portrait::after { content:""; position:absolute; inset:.55rem; border:1px solid rgba(185,142,104,.42); pointer-events:none; }
.director-portrait img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 1.2rem 1.8rem rgba(24,18,17,.18)); }
.director-copy h2 { margin:1.5rem 0 .8rem; font-size:clamp(3rem,6vw,6.5rem); }
.director-role { max-width:45rem; padding-bottom:2rem; color:var(--doe); border-bottom:1px solid rgba(241,238,230,.2); }
.director-copy>p:not(.section-label):not(.director-role) { max-width:43rem; color:rgba(241,238,230,.68); }
.editorial-list { margin:3rem 0 0; padding:0; list-style:none; }
.editorial-list li { display:grid; grid-template-columns:2.5rem 1fr; gap:1rem; padding:1.15rem 0; border-top:1px solid rgba(241,238,230,.18); }
.editorial-list li>span { color:var(--doe); font-size:.7rem; }
.editorial-list p { margin:0; color:rgba(241,238,230,.68); }
.editorial-list strong { color:var(--coconut); font-weight:400; }
.section-heading { display:grid; grid-template-columns:2fr 1fr; gap:4rem; align-items:end; margin-bottom:5rem; }
.section-heading h2 { max-width:15ch; margin:1.5rem 0 0; font-size:clamp(2.8rem,5.2vw,5.7rem); }
.section-heading>p { max-width:23rem; margin-bottom:.6rem; opacity:.65; }
.services { overflow:hidden; }
.services>*:not(.brand-diamonds) { position:relative; z-index:2; }
.brand-diamonds { position:absolute; z-index:1; width:clamp(10rem,18vw,17rem); aspect-ratio:1; pointer-events:none; }
.brand-diamonds i { position:absolute; width:31%; aspect-ratio:1; transform:rotate(45deg); animation:brand-diamond-float 7s ease-in-out infinite alternate; }
.brand-diamonds i:nth-child(1) { top:-2%; right:3%; background:var(--doe); }
.brand-diamonds i:nth-child(2) { top:22%; right:27%; background:var(--coconut); animation-delay:-1.1s; }
.brand-diamonds i:nth-child(3) { top:47%; right:3%; background:var(--eclipse); animation-delay:-2.2s; }
.brand-diamonds i:nth-child(4) { top:22%; right:-21%; background:var(--fudge); animation-delay:-3.3s; }
.brand-diamonds i:nth-child(5) { top:72%; right:27%; background:var(--doe); animation-delay:-4.4s; }
.brand-diamonds i:nth-child(6) { top:72%; right:-21%; background:var(--silver); animation-delay:-5.5s; }
.services-diamonds { top:1.25rem; right:-1rem; opacity:.9; }
.service-list { position:relative; z-index:1; border-top:1px solid var(--dark-line); }
.service-card { display:grid; grid-template-columns:4rem 1fr 1.2fr; gap:2rem; align-items:start; padding:2.3rem 0; border-bottom:1px solid var(--dark-line); }
.service-card>span { display:block; margin:.2rem 0 0; color:var(--fudge); }
.service-card>span b { font:500 .68rem "Outfit",sans-serif; }
.service-card h3 { margin:0; font-size:clamp(1.8rem,3vw,3rem); }
.service-card p { max-width:35rem; margin:.2rem 0 0; color:rgba(53,49,72,.68); }
.service-card::after { content:""; grid-column:1/-1; width:0; height:2px; margin-top:-2px; background:var(--doe); transition:width .45s ease; }
.service-card:hover::after { width:100%; }
.client-cloud { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,3vw,2.4rem); align-items:center; padding:2rem 1rem 3rem; }
.client-card { min-height:15rem; display:grid; place-items:center; padding:clamp(1.5rem,3vw,2.8rem); background:rgba(255,255,255,.42); border:1px solid rgba(53,49,72,.14); box-shadow:0 1.5rem 3.5rem rgba(53,49,72,.12); overflow:hidden; animation:client-drift 7s ease-in-out infinite alternate; will-change:transform; }
.client-card:nth-child(2) { animation-delay:-2.1s; animation-duration:8.2s; }
.client-card:nth-child(3) { animation-delay:-4.3s; animation-duration:6.4s; }
.client-card img { display:block; width:100%; max-width:19rem; height:auto; }
.client-card:nth-child(2) img { max-width:22rem; }
.experience { overflow:hidden; isolation:isolate; background:var(--eclipse); }
.experience::before { content:""; position:absolute; z-index:-2; inset:0; background:url("torre-amanecer-editorial.png") center 48%/cover no-repeat; opacity:.84; filter:saturate(.95) contrast(1.04); transform:scale(1.01); }
.experience::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(53,49,72,.72) 0%,rgba(53,49,72,.5) 55%,rgba(53,49,72,.34) 100%); }
.experience>* { position:relative; z-index:2; }
.experience-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--white-line); border:1px solid var(--white-line); }
.experience-card { min-height:23rem; padding:clamp(1.4rem,2.2vw,2.5rem); background:rgba(53,49,72,.82); backdrop-filter:blur(3px); }
.experience-card>span { color:var(--doe); font-size:.7rem; }
.experience-card h3 { max-width:12ch; margin:4rem 0 1.3rem; font-size:clamp(1.65rem,2.5vw,2.8rem); }
.experience-card p { max-width:29rem; margin-bottom:0; color:rgba(241,238,230,.62); }
.differential { overflow:hidden; isolation:isolate; }
.differential>*:not(.brand-diamonds) { position:relative; z-index:2; }
.differential-diamonds { right:-2.5rem; bottom:1.5rem; opacity:.38; transform:scale(1.35); }
.differential-diamonds i:nth-child(1) { background:var(--eclipse); }
.differential-diamonds i:nth-child(2) { background:var(--doe); }
.differential-diamonds i:nth-child(3) { background:var(--fudge); }
.differential-diamonds i:nth-child(4) { background:var(--silver); }
.differential-diamonds i:nth-child(5) { background:var(--eclipse); }
.differential-diamonds i:nth-child(6) { background:var(--doe); }
.comparison { padding:0 clamp(1rem,2vw,2rem); background:rgba(241,238,230,.92); border:1px solid rgba(53,49,72,.16); }
.comparison-head,.comparison article { display:grid; grid-template-columns:1fr 1.35fr; gap:4rem; padding:1.5rem 0; border-bottom:1px solid var(--dark-line); }
.comparison-head { color:var(--doe); font:500 .72rem "Outfit",sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.comparison article p { margin:0; }
.comparison article p:first-child { font:400 clamp(1.3rem,2vw,1.8rem) "Outfit",sans-serif; line-height:1.25; }
.comparison article p:last-child { color:rgba(53,49,72,.66); }
.work-together { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(3rem,8vw,9rem); align-items:start; overflow:hidden; }
.work-together>*:not(.work-diamond) { position:relative; z-index:2; }
.work-diamond { position:absolute; z-index:1; bottom:-4.75rem; left:-4.75rem; width:clamp(8rem,13vw,12rem); aspect-ratio:1; background:var(--eclipse); transform:rotate(45deg); opacity:.9; animation:brand-diamond-float 7s ease-in-out infinite alternate; pointer-events:none; }
.work-intro h2 { max-width:13ch; margin-top:1.5rem; font-size:clamp(3rem,5.8vw,6.3rem); }
.work-list { margin:0; padding:0; list-style:none; border-top:1px solid rgba(53,49,72,.3); }
.work-list li { display:grid; grid-template-columns:2.5rem 1fr; gap:1.2rem; padding:1.5rem 0; border-bottom:1px solid rgba(53,49,72,.3); }
.work-list span { font-size:.7rem; }
.work-list p { margin:0; font:400 clamp(1.2rem,2vw,1.65rem)/1.28 "Outfit",sans-serif; }
.contact { min-height:100svh; display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,9rem); padding-bottom:9rem; overflow:hidden; }
.contact>*:not(.diamond-cascade) { position:relative; z-index:2; }
.contact-diamonds { top:auto; right:-3rem; bottom:4rem; width:min(28vw,24rem); opacity:.35; }
.contact-intro h2 { max-width:10ch; margin:2rem 0 1.2rem; font-size:clamp(3.5rem,7vw,7.5rem); }
.contact-intro>p:not(.section-label) { color:rgba(241,238,230,.68); font-size:1.15rem; }
.direct-contact { display:grid; gap:.55rem; margin-top:4rem; }
.direct-contact p { margin-bottom:1rem; color:rgba(241,238,230,.65); }
.direct-contact strong { color:var(--coconut); font-weight:400; }
.direct-contact a { width:fit-content; color:var(--doe); border-bottom:1px solid transparent; }
.direct-contact a:hover { border-color:currentColor; }
.contact-form { align-self:start; display:grid; gap:1.7rem; padding-top:3rem; }
.contact-form label { display:grid; gap:.5rem; }
.contact-form label span { color:rgba(241,238,230,.55); font:500 .68rem "Outfit",sans-serif; letter-spacing:.13em; text-transform:uppercase; }
.contact-form input,.contact-form textarea { width:100%; padding:.75rem 0 1rem; color:var(--coconut); background:transparent; border:0; border-bottom:1px solid rgba(241,238,230,.3); border-radius:0; outline:none; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--doe); }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:rgba(241,238,230,.3); }
.contact-form .button { margin-top:1rem; }
.site-footer { position:absolute!important; right:var(--pad); bottom:2rem; left:var(--pad); display:grid; grid-template-columns:1fr auto auto; gap:2rem; align-items:center; padding-top:1.4rem; border-top:1px solid var(--white-line); color:rgba(241,238,230,.55); font-size:.78rem; }
.site-footer .brand { width:7.8rem; }
.site-footer p { margin:0; }
.reveal { opacity:1; transform:none; }
.reveal.reveal-ready { opacity:0; transform:translateY(1.25rem); transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.reveal-ready.is-visible { opacity:1; transform:none; }
@keyframes diamond-breathe { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes brand-diamond-float { 0%{transform:rotate(45deg) translate3d(-.12rem,.12rem,0)} 100%{transform:rotate(45deg) translate3d(.35rem,-.35rem,0)} }
@keyframes client-drift { 0%{transform:translate3d(-.8rem,.35rem,0) rotate(-.6deg)} 100%{transform:translate3d(.8rem,-.35rem,0) rotate(.6deg)} }
@media (max-width:980px) {
  :root { --header-h:72px; }
  .menu-toggle { display:block; }
  .main-nav { position:absolute; top:var(--header-h); left:0; right:0; display:grid; gap:0; padding:1rem var(--pad) 1.4rem; background:var(--eclipse); border-top:1px solid var(--white-line); transform:translateY(-130%); opacity:0; pointer-events:none; transition:transform .25s ease,opacity .25s ease; }
  .main-nav.open { transform:none; opacity:1; pointer-events:auto; }
  .main-nav a { padding:.75rem 0; }
  .strategy-axis { display:none; }
  .about-copy { margin-top:3rem; }
  .about h2 { max-width:16ch; }
  .about-statement { max-width:44rem; margin-top:2rem; }
  .director { grid-template-columns:1fr; }
  .director-portrait { max-width:23rem; }
  .section-heading { grid-template-columns:1fr; gap:1.5rem; }
  .client-cloud { grid-template-columns:1fr 1fr; }
  .client-card:last-child { grid-column:1/-1; width:calc(50% - .75rem); justify-self:center; }
  .experience-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(17rem,70vw); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; }
  .experience-card { scroll-snap-align:start; }
  .work-together,.contact { grid-template-columns:1fr; }
  .work-diamond { bottom:-3.75rem; left:-3.75rem; width:8.5rem; opacity:.78; }
}
@media (max-width:640px) {
  section { min-height:auto; padding-top:6.5rem; padding-bottom:6.5rem; }
  .hero { min-height:100svh; padding-bottom:7rem; }
  .hero-copy { width:100%; }
  .hero h1 { font-size:clamp(2.9rem,13vw,4.5rem); }
  .hero-foot { justify-content:flex-start; gap:1rem; overflow:hidden; }
  .diamond-cascade { right:-20%; width:72vw; opacity:.4; }
  .metrics { grid-template-columns:1fr; }
  .metrics div { min-height:8rem; border-right:0; border-bottom:1px solid var(--dark-line); }
  .metrics div:last-child { border-bottom:0; }
  .service-card { grid-template-columns:2rem 1fr; gap:1rem; }
  .service-card>span { width:1.8rem; margin:.15rem 0 0; }
  .service-card p { grid-column:2; }
  .client-cloud { grid-template-columns:1fr; padding-right:.5rem; padding-left:.5rem; }
  .client-card,.client-card:last-child { width:100%; min-height:12rem; grid-column:auto; }
  .experience-grid { margin-right:calc(var(--pad) * -1); padding-right:var(--pad); grid-auto-columns:minmax(16.5rem,84vw); border-right:0; }
  .comparison-head { display:none; }
  .comparison article { grid-template-columns:1fr; gap:1rem; padding:1.8rem 0; }
  .services-diamonds { top:2rem; right:-4.5rem; opacity:.58; }
  .experience::before { background-position:58% center; opacity:.74; }
  .experience::after { background:rgba(53,49,72,.58); }
  .differential-diamonds { right:-5rem; bottom:3rem; opacity:.25; }
  .comparison article p:last-child { padding-left:1rem; border-left:2px solid var(--doe); }
  .contact { padding-bottom:16rem; }
  .site-footer { grid-template-columns:1fr; gap:.7rem; }
}
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal,.reveal.reveal-ready{opacity:1;transform:none} }