:root{--ink:#11110f;--paper:#ece9df;--muted:#a8a398;--line:rgba(236,233,223,.2);--accent:#d7ff43;--serif:'Italiana',serif;--sans:'DM Sans',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:300}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}img{display:block;width:100%}.noise{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.035;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}.site-header{position:fixed;z-index:40;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:24px 36px;transition:.35s}.site-header.scrolled{background:rgba(17,17,15,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{display:flex;flex-direction:column;line-height:.8;letter-spacing:.05em}.brand-name{font-size:17px;font-weight:600}.brand-sub{font-size:9px;letter-spacing:.57em;margin-top:9px}.main-nav{display:flex;align-items:center;gap:30px;font-size:13px}.main-nav a{opacity:.82}.main-nav a:hover{opacity:1}.nav-contact{border:1px solid rgba(255,255,255,.45);padding:11px 17px;border-radius:99px}.menu-toggle{display:none;background:none;border:0;width:40px;height:40px}.menu-toggle span{display:block;width:25px;height:1px;background:white;margin:7px auto}.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}.hero-media{position:absolute;inset:0;background:url('images/shadi-sleem-cover.jpeg') center 30%/cover;transform:scale(1.03);animation:heroZoom 12s ease-out both}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.1) 66%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 55%)}@keyframes heroZoom{to{transform:scale(1)}}.hero-content{position:relative;z-index:2;padding:0 5vw 8vh;max-width:1000px}.eyebrow,.section-label{text-transform:uppercase;letter-spacing:.22em;font-size:10px;font-weight:500}.hero h1,.intro h2,.projects h2,.services h2,.process h2,.contact h2{font-family:var(--serif);font-weight:400;line-height:.9;letter-spacing:-.02em;margin:22px 0}.hero h1{font-size:clamp(64px,10vw,150px)}em{font-weight:400}.hero-copy{max-width:510px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.78)}.circle-link{position:absolute;left:min(78vw,930px);bottom:7vh;width:120px;height:120px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:flex;justify-content:center;align-items:center;gap:18px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;transition:.3s}.circle-link:hover{background:var(--accent);color:var(--ink);border-color:var(--accent);transform:rotate(-6deg)}.circle-link b{font-size:22px}.hero-index{position:absolute;z-index:2;right:35px;bottom:32px;display:flex;gap:20px;font-size:11px;text-transform:uppercase;letter-spacing:.15em}.section-pad{padding:130px 5vw}.intro{background:var(--paper);color:var(--ink)}.intro-grid,.services-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:10vw;align-items:start}.intro h2,.projects h2,.services h2,.process h2,.contact h2{font-size:clamp(48px,6vw,92px)}.intro-copy{padding-top:30px;max-width:590px}.intro-copy p{font-size:18px;line-height:1.65;margin:0 0 24px;color:#4e4b44}.text-link{display:inline-flex;gap:25px;border-bottom:1px solid;padding-bottom:8px;margin-top:22px;font-size:13px;text-transform:uppercase;letter-spacing:.12em}.projects-head{display:flex;justify-content:space-between;align-items:end}.filter-row{display:flex;gap:8px;flex-wrap:wrap}.filter{background:transparent;color:var(--paper);border:1px solid var(--line);border-radius:99px;padding:9px 15px;cursor:pointer}.filter.active,.filter:hover{background:var(--paper);color:var(--ink)}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}.project-card{position:relative;min-height:62vh;overflow:hidden;cursor:pointer;background:#222}.project-wide{grid-column:1/-1;min-height:78vh}.project-card img{height:100%;object-fit:cover;position:absolute;inset:0;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s}.project-card:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.75),transparent 55%)}.project-card:hover img{transform:scale(1.035);filter:saturate(.8)}.project-info{position:absolute;z-index:2;left:34px;right:34px;bottom:30px}.project-info h3{font-family:var(--serif);font-size:35px;font-weight:400;margin:0 0 4px}.project-info p{font-size:12px;text-transform:uppercase;letter-spacing:.15em;margin:0;opacity:.75}.project-info span{position:absolute;right:0;bottom:2px;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.project-card.hidden{display:none}.services{background:#171714}.service-list{border-top:1px solid var(--line)}.service-item{display:grid;grid-template-columns:45px 1fr;gap:8px;padding:28px 0;border-bottom:1px solid var(--line)}.service-item span{font-size:10px;color:var(--muted)}.service-item h3{margin:0;font-size:22px;font-weight:400}.service-item p{grid-column:2;margin:8px 0 0;color:var(--muted);line-height:1.55;max-width:500px}.process{display:grid;grid-template-columns:1fr 1fr;min-height:85vh}.process-image{background:url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1600&q=85') center/cover}.process-panel{background:#b9b2a3;color:var(--ink);padding:11vh 7vw;display:flex;flex-direction:column;justify-content:center}.steps{margin-top:35px;border-top:1px solid rgba(0,0,0,.25)}.steps div{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.25)}.steps b{font-size:10px}.steps span{font-size:17px}.contact{background:var(--paper);color:var(--ink)}.contact-top h2{font-size:clamp(60px,8vw,118px);max-width:1200px}.contact-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:10vw;margin-top:75px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.15em;margin-bottom:28px}input,textarea,select{display:block;width:100%;border:0;border-bottom:1px solid rgba(0,0,0,.25);background:transparent;border-radius:0;padding:14px 0;color:var(--ink);outline:none;text-transform:none;letter-spacing:0;font-size:16px}textarea{resize:vertical}.submit-btn{border:0;background:var(--ink);color:var(--paper);padding:17px 22px;min-width:210px;display:flex;justify-content:space-between;cursor:pointer}.form-note{font-size:11px;color:#777}.contact-details{border-left:1px solid rgba(0,0,0,.18);padding-left:5vw}.contact-details div{margin-bottom:38px}.contact-details small{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:#777;margin-bottom:10px}.contact-details a,.contact-details p{font-size:18px;line-height:1.5;margin:0}.whatsapp-link{display:flex!important;justify-content:space-between;background:#cfff45;padding:17px 20px;color:#111;font-size:13px!important;text-transform:uppercase;letter-spacing:.1em}footer{padding:80px 5vw 30px;background:#0b0b0a}.footer-brand{width:max-content;margin-bottom:30px}.footer-brand .brand-name{font-size:28px}.footer-brand .brand-sub{font-size:11px}footer>p{color:var(--muted);max-width:450px;line-height:1.6}.footer-bottom{margin-top:90px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.modal{position:fixed;z-index:100;inset:0;background:rgba(5,5,4,.96);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s;padding:5vw}.modal.open{opacity:1;visibility:visible}.modal img{max-width:1200px;max-height:75vh;object-fit:contain}.modal-close{position:absolute;right:30px;top:20px;background:none;border:0;color:white;font-size:38px;cursor:pointer}.modal-caption{width:min(1200px,100%);margin-top:16px}.modal-caption p{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin:0}.modal-caption h3{font-family:var(--serif);font-size:36px;font-weight:400;margin:6px 0}
@media(max-width:850px){.site-header{padding:20px}.menu-toggle{display:block;position:relative;z-index:2}.main-nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;font-family:var(--serif);font-size:42px;opacity:0;visibility:hidden;transition:.3s}.menu-open .main-nav{opacity:1;visibility:visible}.hero-content{padding:0 22px 13vh}.hero h1{font-size:19vw}.hero-copy{font-size:15px}.circle-link{display:none}.hero-index{left:22px;right:auto}.section-pad{padding:90px 22px}.intro-grid,.services-grid,.contact-grid,.process{grid-template-columns:1fr}.intro h2,.projects h2,.services h2,.process h2,.contact h2{font-size:14vw}.projects-head{display:block}.filter-row{margin-top:35px}.project-grid{grid-template-columns:1fr}.project-card,.project-wide{grid-column:auto;min-height:60vh}.project-info{left:20px;right:20px}.project-info h3{font-size:29px}.project-info span{display:none}.process-image{min-height:58vh}.process-panel{padding:80px 22px}.contact-grid{gap:50px}.field-row{grid-template-columns:1fr;gap:0}.contact-details{border-left:0;border-top:1px solid rgba(0,0,0,.18);padding:40px 0 0}.footer-bottom{gap:15px;flex-direction:column}.brand-name{font-size:14px}}


/* DARK / BOLD ART DIRECTION */
:root{
  --ink:#050505;
  --paper:#0a0a0a;
  --muted:#8d8d8d;
  --line:rgba(255,255,255,.16);
  --accent:#ff4d00;
}
body{background:#050505;color:#f4f1e9}
.site-header{padding:28px 4vw;text-transform:uppercase}
.site-header.scrolled{background:rgba(5,5,5,.9);border-bottom:1px solid rgba(255,255,255,.12)}
.brand-name{font-size:18px;font-weight:700;letter-spacing:.02em}
.brand-sub{letter-spacing:.68em;color:#bdbdbd}
.main-nav{font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.nav-contact{border-radius:0;border-color:#fff;padding:13px 18px}
.nav-contact:hover{background:#fff;color:#050505}
.hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.2) 70%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%)}
.hero-content{max-width:1250px}
.hero h1{font-family:var(--sans);font-weight:700;line-height:.78;letter-spacing:-.075em;text-transform:uppercase;font-size:clamp(72px,11.5vw,178px)}
.hero h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;text-transform:none}
.hero-copy{font-size:18px;max-width:600px;font-weight:400}
.eyebrow,.section-label{font-weight:700;color:#ff5a14}
.circle-link{border-radius:0;width:132px;height:132px;border-color:#fff;font-weight:600}
.circle-link:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-6px)}
.hero-index{font-weight:700}
.section-pad{padding-top:150px;padding-bottom:150px}
.intro,.contact{background:#090909;color:#f4f1e9}
.intro{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.intro h2,.projects h2,.services h2,.process h2,.contact h2{font-family:var(--sans);font-weight:700;line-height:.88;letter-spacing:-.055em;text-transform:uppercase}
.intro-copy p{color:#aaa;font-size:19px}
.text-link{font-weight:700;border-color:#fff}
.projects{background:#050505}
.projects-head{border-bottom:1px solid var(--line)}
.filter{border-radius:0;text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.12em}
.filter.active,.filter:hover{background:#ff4d00;color:#fff;border-color:#ff4d00}
.project-grid{gap:1px;background:#1b1b1b}
.project-card:after{background:linear-gradient(0deg,rgba(0,0,0,.9),transparent 62%)}
.project-card:hover img{transform:scale(1.055);filter:grayscale(.18) contrast(1.08)}
.project-info h3{font-family:var(--sans);font-size:clamp(28px,3vw,52px);font-weight:700;letter-spacing:-.04em;text-transform:uppercase}
.project-info p,.project-info span{font-weight:700}
.services{background:#0b0b0b;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.service-item{grid-template-columns:55px 1fr;padding:34px 0}
.service-item h3{font-size:28px;font-weight:700;text-transform:uppercase;letter-spacing:-.03em}
.service-item p{color:#8f8f8f}
.process-panel{background:#ff4d00;color:#050505}
.process-panel .section-label{color:#050505}
.steps{border-color:rgba(0,0,0,.4)}
.steps div{padding:24px 0;border-color:rgba(0,0,0,.4)}
.steps span{font-size:20px;font-weight:700;text-transform:uppercase}
.contact{border-top:1px solid var(--line)}
.contact-top h2 em{font-family:var(--serif);font-weight:400;text-transform:none}
input,textarea,select{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
input::placeholder,textarea::placeholder{color:#6f6f6f}
select option{background:#0a0a0a;color:#fff}
.submit-btn{background:#ff4d00;color:#fff;border:1px solid #ff4d00;text-transform:uppercase;font-weight:700;letter-spacing:.08em}
.submit-btn:hover{background:transparent}
.form-note,.contact-details small{color:#777}
.contact-details{border-left-color:rgba(255,255,255,.17)}
.whatsapp-link{background:#fff;color:#050505;font-weight:700;border:1px solid #fff}
.whatsapp-link:hover{background:transparent;color:#fff}
footer{background:#020202;border-top:1px solid var(--line)}
.footer-brand .brand-name{font-weight:700}
.modal{background:rgba(0,0,0,.98)}
.modal-caption h3{font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:-.03em}
@media(max-width:850px){
  .site-header{padding:20px}
  .hero h1{font-size:20vw;line-height:.82}
  .section-pad{padding-top:100px;padding-bottom:100px}
  .intro h2,.projects h2,.services h2,.process h2,.contact h2{font-size:13.5vw}
  .project-info h3{font-size:31px}
  .contact-details{border-top-color:rgba(255,255,255,.17)}
}

/* MONOCHROME / BOLD IDENTITY — FINAL OVERRIDE */
:root{
  --ink:#000000;
  --paper:#000000;
  --muted:#9a9a9a;
  --line:rgba(255,255,255,.20);
  --accent:#ffffff;
}
html{background:#000}
body{background:#000;color:#fff}
.noise{opacity:.055;mix-blend-mode:screen}
.site-header.scrolled{background:rgba(0,0,0,.94)}
.brand-sub{color:#fff}
.nav-contact{background:#fff;color:#000;border-color:#fff}
.nav-contact:hover{background:#000;color:#fff}
.hero-media,.project-card img,.process-image{filter:grayscale(100%) contrast(1.08)}
.hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.25) 72%),linear-gradient(0deg,rgba(0,0,0,.8),transparent 60%)}
.eyebrow,.section-label{color:#fff}
.circle-link:hover{background:#fff;border-color:#fff;color:#000}
.intro,.contact,.projects,.services{background:#000;color:#fff}
.intro-copy p,.service-item p{color:#aaa}
.filter.active,.filter:hover{background:#fff;color:#000;border-color:#fff}
.project-grid{background:#fff}
.project-card{background:#000}
.project-card:hover img{filter:grayscale(100%) contrast(1.22);transform:scale(1.055)}
.project-info h3{font-size:clamp(32px,4.1vw,72px);line-height:.9}
.services{background:#050505}
.process-panel{background:#fff;color:#000}
.process-panel .section-label{color:#000}
.process-image{filter:grayscale(100%) contrast(1.12)}
.submit-btn{background:#fff;color:#000;border-color:#fff}
.submit-btn:hover{background:#000;color:#fff}
.whatsapp-link{background:#fff;color:#000;border-color:#fff}
.whatsapp-link:hover{background:#000;color:#fff}
footer{background:#000}
::selection{background:#fff;color:#000}

/* LIGHT / DARK MODE */
.theme-toggle{
  display:inline-flex;align-items:center;gap:9px;padding:12px 14px;
  border:1px solid currentColor;background:transparent;color:inherit;
  text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;
  cursor:pointer;transition:.25s;
}
.theme-toggle:hover{background:currentColor;color:var(--theme-bg)}
.theme-icon{font-size:15px;line-height:1}

:root,
:root[data-theme="dark"]{
  --theme-bg:#000;
  --theme-surface:#050505;
  --theme-text:#fff;
  --theme-muted:#9a9a9a;
  --theme-line:rgba(255,255,255,.20);
  --theme-inverse:#fff;
  --theme-inverse-text:#000;
}

:root[data-theme="light"]{
  --theme-bg:#f2f0ea;
  --theme-surface:#e8e5dd;
  --theme-text:#090909;
  --theme-muted:#66645f;
  --theme-line:rgba(0,0,0,.20);
  --theme-inverse:#090909;
  --theme-inverse-text:#fff;
}

body{background:var(--theme-bg);color:var(--theme-text);transition:background .3s,color .3s}
.site-header.scrolled{background:color-mix(in srgb,var(--theme-bg) 94%,transparent);border-bottom-color:var(--theme-line)}
.brand-sub,.eyebrow,.section-label{color:var(--theme-text)}
.main-nav{color:var(--theme-text)}
.nav-contact{background:var(--theme-inverse);color:var(--theme-inverse-text);border-color:var(--theme-inverse)}
.nav-contact:hover{background:transparent;color:var(--theme-text)}
.intro,.contact,.projects{background:var(--theme-bg);color:var(--theme-text)}
.services{background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-line)}
.intro,.contact{border-color:var(--theme-line)}
.intro-copy p,.service-item p,footer>p,.form-note,.contact-details small{color:var(--theme-muted)}
.text-link,.service-list,.service-item,.projects-head,.footer-bottom{border-color:var(--theme-line)}
.filter{color:var(--theme-text);border-color:var(--theme-line)}
.filter.active,.filter:hover{background:var(--theme-inverse);color:var(--theme-inverse-text);border-color:var(--theme-inverse)}
.process-panel{background:var(--theme-inverse);color:var(--theme-inverse-text)}
.process-panel .section-label{color:var(--theme-inverse-text)}
input,textarea,select{color:var(--theme-text);border-bottom-color:var(--theme-line)}
select option{background:var(--theme-bg);color:var(--theme-text)}
.submit-btn,.whatsapp-link{background:var(--theme-inverse);color:var(--theme-inverse-text);border-color:var(--theme-inverse)}
.submit-btn:hover,.whatsapp-link:hover{background:transparent;color:var(--theme-text)}
.contact-details{border-color:var(--theme-line)}
footer{background:var(--theme-bg);color:var(--theme-text);border-color:var(--theme-line)}
.modal{background:color-mix(in srgb,var(--theme-bg) 97%,transparent)}
.modal-close{color:var(--theme-text)}
.menu-toggle span{background:var(--theme-text)}

:root[data-theme="light"] .hero-media,
:root[data-theme="light"] .project-card img,
:root[data-theme="light"] .process-image{filter:grayscale(100%) contrast(1.04)}
:root[data-theme="light"] .hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.18) 72%),linear-gradient(0deg,rgba(0,0,0,.72),transparent 60%)}
:root[data-theme="light"] .hero,
:root[data-theme="light"] .hero .eyebrow{color:#fff}
:root[data-theme="light"] .project-grid{background:#111}
:root[data-theme="light"] .noise{mix-blend-mode:multiply;opacity:.035}

@media(max-width:850px){
  .main-nav{background:var(--theme-bg)}
  .theme-toggle{font-family:var(--sans);font-size:11px;margin-top:10px}
}

/* FULL-COLOR PROJECT PHOTOGRAPHY — FINAL OVERRIDE */
.hero-media,
.project-card img,
.process-image,
:root[data-theme="light"] .hero-media,
:root[data-theme="light"] .project-card img,
:root[data-theme="light"] .process-image,
.project-card:hover img{
  filter:none !important;
}

/* MULTI-IMAGE PROJECT GALLERY */
.modal{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center}
.modal-stage{width:min(1200px,100%);height:min(75vh,850px);display:grid;place-items:center;overflow:hidden}
.modal-stage img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.modal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:54px;height:54px;border:1px solid currentColor;background:color-mix(in srgb,var(--theme-bg) 72%,transparent);color:var(--theme-text);font-size:23px;cursor:pointer;backdrop-filter:blur(10px);transition:.25s}
.modal-nav:hover{background:var(--theme-inverse);color:var(--theme-inverse-text)}
.modal-prev{left:28px}.modal-next{right:28px}
.modal-nav[hidden]{display:none}
.modal-caption{display:flex;justify-content:space-between;align-items:end;gap:30px}
.modal-counter{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--theme-muted);padding-bottom:7px}
@media(max-width:850px){
  .modal{padding:70px 16px 24px}
  .modal-stage{height:68vh}
  .modal-nav{top:auto;bottom:25px;width:48px;height:48px}
  .modal-prev{left:auto;right:74px}.modal-next{right:18px}
  .modal-caption{padding-right:120px}
  .modal-counter{display:none}
}

/* PROJECT COVER + FULL PROJECT VIEW
   Covers stay visually strong and cropped; opened renders show completely. */
.project-card{
  display:block;
  background:#000;
}
.project-card img,
:root[data-theme="light"] .project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
}
.project-card:hover img,
:root[data-theme="light"] .project-card:hover img{
  object-fit:cover;
  transform:scale(1.055);
}
.modal-stage{
  width:min(1500px,100%);
  height:min(82vh,1000px);
  overflow:hidden;
  background:#050505;
}
:root[data-theme="light"] .modal-stage{background:#f2f2f2}
.modal-stage img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* Portrait project viewer — full image, no cropping */
.modal{
  padding:32px 5vw 22px;
}
.modal-stage{
  width:min(68vh, 720px, 82vw);
  height:auto;
  aspect-ratio:4 / 5;
  max-height:82vh;
  margin-inline:auto;
  background:#0a0a0a;
  overflow:hidden;
}
:root[data-theme="light"] .modal-stage{
  background:#eeeeee;
}
.modal-stage img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.modal-caption{
  width:min(68vh, 720px, 82vw);
  margin-inline:auto;
}
@media (max-width:700px){
  .modal{
    padding:64px 12px 18px;
  }
  .modal-stage{
    width:min(92vw, 68vh);
    max-height:76vh;
    aspect-ratio:4 / 5;
  }
  .modal-caption{
    width:min(92vw, 68vh);
  }
}


/* Landscape portfolio projects: full-width cinematic covers */
.project-card.landscape-project{
  grid-column:1 / -1;
  min-height:0;
  aspect-ratio:16 / 9;
}
.project-card.landscape-project img{
  width:100%;
  height:100%;
  object-fit:cover;
}
@media(max-width:850px){
  .project-card.landscape-project{
    grid-column:auto;
    aspect-ratio:4 / 3;
    min-height:0;
  }
}

/* =========================================================
   APPLE-INSPIRED REDESIGN — SOFT RADIUS + FLUID MOTION
   ========================================================= */
:root{
  --apple-bg:#f5f5f7;
  --apple-surface:rgba(255,255,255,.78);
  --apple-card:#fff;
  --apple-text:#1d1d1f;
  --apple-muted:#6e6e73;
  --apple-border:rgba(0,0,0,.09);
  --apple-shadow:0 24px 70px rgba(0,0,0,.10);
  --apple-radius:30px;
  --apple-radius-sm:20px;
  --apple-blue:#0071e3;
}
:root[data-theme="dark"]{
  --apple-bg:#000;
  --apple-surface:rgba(22,22,23,.78);
  --apple-card:#101010;
  --apple-text:#f5f5f7;
  --apple-muted:#a1a1a6;
  --apple-border:rgba(255,255,255,.12);
  --apple-shadow:0 28px 90px rgba(0,0,0,.45);
  --apple-blue:#2997ff;
}
html{scroll-behavior:smooth;background:var(--apple-bg)}
body{
  background:var(--apple-bg)!important;
  color:var(--apple-text)!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","DM Sans",Arial,sans-serif!important;
  overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}
.noise{display:none!important}
.section-pad{padding-left:clamp(24px,6vw,108px)!important;padding-right:clamp(24px,6vw,108px)!important}
.section-label{color:var(--apple-muted)!important;letter-spacing:.08em!important;font-weight:600!important}

/* Glass navigation */
.site-header{
  position:fixed!important;
  top:14px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:min(1180px,calc(100% - 28px))!important;
  height:64px!important;
  padding:0 18px 0 24px!important;
  border:1px solid var(--apple-border)!important;
  border-radius:22px!important;
  background:var(--apple-surface)!important;
  backdrop-filter:saturate(180%) blur(24px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(24px)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.08)!important;
  z-index:50;
  transition:all .35s cubic-bezier(.2,.8,.2,1)!important;
}
.site-header.scrolled{top:8px!important;height:58px!important;box-shadow:0 14px 45px rgba(0,0,0,.14)!important}
.brand{color:var(--apple-text)!important;gap:1px!important}
.brand-name{font-size:13px!important;font-weight:700!important;letter-spacing:.02em!important}
.brand-sub{font-size:9px!important;color:var(--apple-muted)!important;letter-spacing:.18em!important}
.main-nav{gap:5px!important;align-items:center!important}
.main-nav a,.theme-toggle{
  color:var(--apple-text)!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:0!important;
  text-transform:none!important;
  border-radius:999px!important;
  padding:10px 14px!important;
  transition:background .25s ease,transform .25s ease,color .25s ease!important;
}
.main-nav a:hover,.theme-toggle:hover{background:rgba(128,128,128,.13)!important;transform:translateY(-1px)}
.main-nav .nav-contact{background:var(--apple-text)!important;color:var(--apple-bg)!important;padding:10px 17px!important}
.main-nav .nav-contact:hover{opacity:.82!important;background:var(--apple-text)!important}
.theme-toggle{border:0!important;background:transparent!important}

/* Hero */
.hero{
  width:calc(100% - clamp(20px,3vw,48px))!important;
  min-height:calc(100svh - 30px)!important;
  margin:15px auto 0!important;
  border-radius:clamp(24px,3vw,44px)!important;
  overflow:hidden!important;
  background:#080808!important;
  box-shadow:var(--apple-shadow)!important;
  isolation:isolate;
}
.hero-media{transform:scale(1.01);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)!important}
.hero:hover .hero-media{transform:scale(1.035)}
.hero-overlay{
  background:linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.07) 35%,rgba(0,0,0,.72) 100%)!important;
}
.hero-content{
  left:clamp(28px,6vw,100px)!important;
  right:clamp(28px,6vw,100px)!important;
  bottom:clamp(46px,8vh,110px)!important;
  max-width:1000px!important;
}
.hero .eyebrow{font-size:clamp(11px,1vw,14px)!important;letter-spacing:.02em!important;text-transform:none!important;font-weight:600!important;opacity:.85}
.hero h1{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","DM Sans",sans-serif!important;
  font-size:clamp(52px,8.8vw,138px)!important;
  line-height:.86!important;
  letter-spacing:-.065em!important;
  font-weight:700!important;
  text-transform:none!important;
  max-width:1100px!important;
  margin:18px 0 26px!important;
}
.hero h1 em{font-family:inherit!important;font-style:normal!important;font-weight:300!important;letter-spacing:-.075em!important}
.hero-copy{font-size:clamp(16px,1.5vw,22px)!important;line-height:1.4!important;max-width:610px!important;color:rgba(255,255,255,.82)!important}
.circle-link{
  width:auto!important;height:auto!important;border:0!important;border-radius:999px!important;
  background:rgba(255,255,255,.92)!important;color:#111!important;padding:13px 18px!important;
  display:inline-flex!important;gap:22px!important;margin-top:28px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.18)!important;backdrop-filter:blur(14px);
}
.circle-link span{font-size:13px!important;line-height:1!important;text-transform:none!important;letter-spacing:0!important;font-weight:650!important}
.circle-link b{font-size:17px!important;transition:transform .3s ease}.circle-link:hover b{transform:translate(3px,3px)}
.hero-index{display:none!important}

/* Editorial sections */
.intro{padding-top:clamp(110px,13vw,190px)!important;padding-bottom:clamp(110px,13vw,190px)!important}
.intro-grid{gap:clamp(45px,8vw,140px)!important;align-items:start!important}
.intro h2,.projects-head h2,.services h2,.contact h2{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","DM Sans",sans-serif!important;
  font-weight:650!important;letter-spacing:-.055em!important;line-height:.94!important;
  color:var(--apple-text)!important;text-transform:none!important;
}
.intro h2{font-size:clamp(48px,6.3vw,98px)!important}
.intro-copy p{font-size:clamp(18px,1.55vw,24px)!important;line-height:1.5!important;color:var(--apple-muted)!important}
.text-link{color:var(--apple-blue)!important;border:0!important;font-weight:600!important;padding-bottom:0!important}

/* Projects */
.projects{background:transparent!important;padding-bottom:clamp(100px,12vw,180px)!important}
.projects-head{padding-top:30px!important;padding-bottom:52px!important;border:0!important;align-items:end!important}
.projects-head h2{font-size:clamp(48px,6.5vw,100px)!important}
.filter-row{background:rgba(128,128,128,.10)!important;padding:5px!important;border-radius:999px!important;gap:2px!important}
.filter{
  border:0!important;border-radius:999px!important;padding:10px 16px!important;
  text-transform:none!important;letter-spacing:0!important;font-weight:600!important;color:var(--apple-muted)!important;
}
.filter.active,.filter:hover{background:var(--apple-card)!important;color:var(--apple-text)!important;box-shadow:0 5px 20px rgba(0,0,0,.08)!important}
.project-grid{
  width:min(1500px,calc(100% - clamp(28px,6vw,108px)))!important;
  margin:0 auto!important;background:transparent!important;gap:clamp(18px,2.1vw,34px)!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.project-card,.project-card.landscape-project{
  grid-column:auto!important;aspect-ratio:4/3!important;min-height:0!important;
  border-radius:var(--apple-radius)!important;overflow:hidden!important;
  background:var(--apple-card)!important;box-shadow:0 1px 0 var(--apple-border),0 10px 38px rgba(0,0,0,.06)!important;
  transform:translateZ(0);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,opacity .4s ease!important;
}
.project-card.project-wide{grid-column:1/-1!important;aspect-ratio:16/8.4!important}
.project-card:hover{transform:translateY(-8px) scale(1.006)!important;box-shadow:var(--apple-shadow)!important}
.project-card img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .4s!important}
.project-card:hover img{transform:scale(1.045)!important}
.project-info{
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82))!important;
  padding:70px clamp(22px,3vw,42px) clamp(22px,3vw,38px)!important;
}
.project-info h3{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif!important;font-size:clamp(25px,2.5vw,42px)!important;letter-spacing:-.04em!important;text-transform:none!important}
.project-info p{font-size:13px!important;text-transform:none!important;letter-spacing:0!important;opacity:.75!important}
.project-info span{border-radius:999px!important;background:rgba(255,255,255,.16)!important;backdrop-filter:blur(12px)!important;padding:9px 13px!important;font-size:11px!important;text-transform:none!important;letter-spacing:0!important}

/* Services / process cards */
.services{padding-top:clamp(100px,12vw,170px)!important;padding-bottom:clamp(100px,12vw,170px)!important}
.services h2{font-size:clamp(48px,6vw,94px)!important}
.service-list{border:0!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:18px!important;margin-top:55px!important}
.service-item{
  border:1px solid var(--apple-border)!important;border-radius:var(--apple-radius-sm)!important;
  background:var(--apple-card)!important;padding:30px!important;min-height:180px!important;
  transition:transform .35s ease,box-shadow .35s ease!important;
}
.service-item:hover{transform:translateY(-5px)!important;box-shadow:0 24px 60px rgba(0,0,0,.09)!important}
.process-panel{margin:0 clamp(14px,3vw,48px)!important;border-radius:var(--apple-radius)!important;overflow:hidden!important;background:#111!important;box-shadow:var(--apple-shadow)!important}
.process-image{border-radius:0!important}

/* Contact */
.contact{padding-top:clamp(110px,13vw,190px)!important;padding-bottom:clamp(100px,12vw,170px)!important}
.contact h2{font-size:clamp(54px,7.5vw,118px)!important}
.contact-form{background:var(--apple-card)!important;border:1px solid var(--apple-border)!important;border-radius:var(--apple-radius)!important;padding:clamp(24px,4vw,52px)!important;box-shadow:0 18px 60px rgba(0,0,0,.06)!important}
input,textarea,select{border:1px solid var(--apple-border)!important;background:rgba(128,128,128,.07)!important;border-radius:14px!important;padding:15px!important;margin-top:8px!important;transition:border .25s,box-shadow .25s!important}
input:focus,textarea:focus,select:focus{outline:none!important;border-color:var(--apple-blue)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--apple-blue) 18%,transparent)!important}
.submit-btn,.whatsapp-link{border:0!important;border-radius:999px!important;padding:14px 20px!important;font-weight:650!important;text-transform:none!important;letter-spacing:0!important}
.submit-btn{background:var(--apple-blue)!important;color:white!important}.submit-btn:hover{background:var(--apple-blue)!important;filter:brightness(1.08)!important;transform:translateY(-2px)!important}
.whatsapp-link{background:var(--apple-text)!important;color:var(--apple-bg)!important}
.contact-details{border:0!important;border-radius:var(--apple-radius)!important;background:var(--apple-card)!important;padding:clamp(25px,4vw,48px)!important;box-shadow:0 18px 60px rgba(0,0,0,.06)!important}
footer{border:0!important;background:transparent!important}

/* Modal — premium floating viewer */
.modal{
  background:rgba(0,0,0,.72)!important;backdrop-filter:blur(22px) saturate(120%)!important;
  opacity:0!important;visibility:hidden!important;transition:opacity .35s ease,visibility .35s!important;
}
.modal.open{opacity:1!important;visibility:visible!important}
.modal-stage{
  border-radius:28px!important;background:#0b0b0b!important;box-shadow:0 35px 120px rgba(0,0,0,.65)!important;
  transform:scale(.94) translateY(18px);transition:transform .45s cubic-bezier(.2,.8,.2,1)!important;
}
.modal.open .modal-stage{transform:scale(1) translateY(0)}
.modal-stage img{border-radius:24px!important}
.modal-close,.modal-nav{border-radius:999px!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(20,20,20,.55)!important;color:white!important;backdrop-filter:blur(15px)!important}
.modal-caption{color:white!important}.modal-caption p,.modal-counter{color:rgba(255,255,255,.65)!important}

/* Scroll reveal */
.reveal-ready{opacity:0;transform:translateY(42px);filter:blur(5px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1),filter .85s ease}
.reveal-ready.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
.project-card.reveal-ready:nth-child(even){transition-delay:.08s}
.project-card.reveal-ready:nth-child(3n){transition-delay:.14s}

/* Pointer glow */
.pointer-glow{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(41,151,255,.10),transparent 68%);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease}
body:hover .pointer-glow{opacity:1}

@media(max-width:900px){
  .site-header{top:9px!important;width:calc(100% - 18px)!important;border-radius:19px!important}
  .main-nav{top:72px!important;left:9px!important;right:9px!important;border-radius:24px!important;background:var(--apple-surface)!important;border:1px solid var(--apple-border)!important;backdrop-filter:blur(24px)!important;padding:18px!important}
  .main-nav a,.theme-toggle{font-size:18px!important;padding:12px 14px!important}
  .hero{width:calc(100% - 16px)!important;margin-top:8px!important;border-radius:28px!important;min-height:92svh!important}
  .hero h1{font-size:clamp(48px,16vw,76px)!important}
  .project-grid{grid-template-columns:1fr!important;width:calc(100% - 28px)!important}
  .project-card,.project-card.project-wide,.project-card.landscape-project{grid-column:auto!important;aspect-ratio:4/3!important;border-radius:24px!important}
  .service-list{grid-template-columns:1fr!important}
  .filter-row{width:100%!important;overflow-x:auto!important;justify-content:flex-start!important}
  .projects-head{align-items:flex-start!important;gap:32px!important}
  .process-panel{margin:0 8px!important;border-radius:25px!important}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}
  .reveal-ready{opacity:1!important;transform:none!important;filter:none!important}
  .pointer-glow{display:none!important}
}

/* FINAL REQUEST — white project titles in both themes */
.project-info h3,
:root[data-theme="light"] .project-info h3,
:root[data-theme="dark"] .project-info h3,
.modal-caption h3,
:root[data-theme="light"] .modal-caption h3,
:root[data-theme="dark"] .modal-caption h3{
  color:#fff !important;
}

/* FINAL REQUEST — remove lower process photo and enlarge process statement */
.process{
  display:block !important;
  min-height:auto !important;
  padding:clamp(14px,3vw,48px) !important;
}
.process-image{
  display:none !important;
}
.process-panel{
  width:100% !important;
  min-height:clamp(680px,88vh,980px) !important;
  margin:0 !important;
  padding:clamp(70px,10vw,160px) clamp(30px,10vw,170px) !important;
  justify-content:center !important;
  border-radius:var(--apple-radius) !important;
}
.process-panel h2{
  max-width:1100px !important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","DM Sans",sans-serif !important;
  font-size:clamp(58px,9vw,150px) !important;
  line-height:.88 !important;
  letter-spacing:-.065em !important;
  font-weight:650 !important;
  text-transform:none !important;
  margin:26px 0 64px !important;
}
.process-panel .steps{
  width:min(900px,100%) !important;
  margin-top:0 !important;
}
@media(max-width:900px){
  .process{padding:8px !important}
  .process-panel{
    min-height:78svh !important;
    margin:0 !important;
    padding:70px 24px !important;
  }
  .process-panel h2{
    font-size:clamp(48px,15vw,78px) !important;
    margin-bottom:45px !important;
  }
}

/* Process statement theme colors */
:root:not([data-theme="light"]) .process-panel,
:root[data-theme="dark"] .process-panel,
:root:not([data-theme="light"]) .process-panel .section-label,
:root[data-theme="dark"] .process-panel .section-label,
:root:not([data-theme="light"]) .process-panel h2,
:root[data-theme="dark"] .process-panel h2,
:root:not([data-theme="light"]) .process-panel .steps,
:root[data-theme="dark"] .process-panel .steps {
  color:#fff !important;
}

:root[data-theme="light"] .process-panel,
:root[data-theme="light"] .process-panel .section-label,
:root[data-theme="light"] .process-panel h2,
:root[data-theme="light"] .process-panel .steps {
  color:#000 !important;
}

:root:not([data-theme="light"]) .process-panel .steps,
:root[data-theme="dark"] .process-panel .steps {
  border-color:rgba(255,255,255,.25) !important;
}
:root:not([data-theme="light"]) .process-panel .steps > div,
:root[data-theme="dark"] .process-panel .steps > div {
  border-color:rgba(255,255,255,.25) !important;
}
:root[data-theme="light"] .process-panel .steps,
:root[data-theme="light"] .process-panel .steps > div {
  border-color:rgba(0,0,0,.22) !important;
}

/* 2026 FINAL STUDIO POLISH — professional rhythm, smooth interaction, dark-only identity */
:root{
  --studio-bg:#050505;
  --studio-surface:#0d0d0e;
  --studio-surface-2:#141416;
  --studio-text:#f5f5f7;
  --studio-muted:#a1a1a6;
  --studio-border:rgba(255,255,255,.11);
  --studio-radius:30px;
  --studio-radius-sm:22px;
  --studio-ease:cubic-bezier(.22,1,.36,1);
}
html{background:var(--studio-bg);scroll-padding-top:110px}
body{background:var(--studio-bg);color:var(--studio-text);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#fff;color:#000}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
.section-pad{padding-left:clamp(22px,5vw,86px)!important;padding-right:clamp(22px,5vw,86px)!important}
.section-label{color:var(--studio-muted)!important;font-weight:600!important;letter-spacing:.17em!important}

.site-header{
  top:14px!important;left:50%!important;transform:translateX(-50%);
  width:min(calc(100% - 28px),1480px)!important;
  padding:13px 16px 13px 22px!important;
  background:rgba(12,12,13,.58)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:22px!important;
  backdrop-filter:blur(24px) saturate(150%)!important;
  box-shadow:0 12px 44px rgba(0,0,0,.22)!important;
  transition:transform .45s var(--studio-ease),background .35s,border-color .35s!important;
}
.site-header.header-hidden{transform:translate(-50%,-135%)!important}
.site-header.scrolled{background:rgba(8,8,9,.83)!important;border-color:rgba(255,255,255,.14)!important}
.brand{padding:5px 0}.brand-name{font-size:15px!important;letter-spacing:-.01em!important}.brand-sub{font-size:8px!important;letter-spacing:.54em!important;margin-top:8px!important}
.main-nav{gap:8px!important}.main-nav a{padding:10px 13px!important;border-radius:999px;transition:background .25s ease,opacity .25s ease!important}.main-nav a:hover{background:rgba(255,255,255,.08)!important}.nav-contact{background:#fff!important;color:#050505!important;border:0!important;font-weight:650!important}

.hero{width:calc(100% - 20px)!important;margin:10px auto 0!important;border-radius:34px!important;min-height:calc(100svh - 20px)!important;box-shadow:0 25px 90px rgba(0,0,0,.38)!important}
.hero-media{will-change:transform;animation-duration:18s!important}.hero-overlay{background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.08) 70%),linear-gradient(0deg,rgba(0,0,0,.63),transparent 62%)!important}
.hero-content{padding-left:clamp(26px,5vw,82px)!important;padding-bottom:clamp(68px,8vh,100px)!important}.hero h1{max-width:1180px;font-weight:650!important;letter-spacing:-.065em!important;line-height:.84!important;text-wrap:balance}.hero-copy{font-size:clamp(15px,1.35vw,19px)!important;max-width:590px!important;color:rgba(255,255,255,.76)!important}
.circle-link{background:rgba(10,10,10,.22);backdrop-filter:blur(15px);transition:transform .45s var(--studio-ease),background .3s,color .3s!important}.circle-link:hover{background:#fff!important;color:#050505!important;border-color:#fff!important;transform:scale(1.05) rotate(-4deg)!important}

.intro,.projects,.services,.contact{position:relative}
.intro-grid,.services-grid{max-width:1480px;margin-inline:auto}.intro h2,.projects h2,.services h2,.contact h2{letter-spacing:-.06em!important;line-height:.92!important;text-wrap:balance}.intro-copy p{color:var(--studio-muted)!important}

.projects{padding-bottom:clamp(90px,11vw,170px)!important}.projects-head{max-width:1480px;margin-inline:auto;padding-bottom:44px!important}.filter-row{padding:5px!important;background:rgba(255,255,255,.055)!important;border:1px solid var(--studio-border)!important;border-radius:999px!important;gap:3px!important}.filter{border:0!important;padding:10px 17px!important;font-weight:550!important;transition:background .28s,color .28s,transform .28s!important}.filter.active{background:#fff!important;color:#050505!important;box-shadow:0 5px 16px rgba(0,0,0,.25)!important}.filter:active{transform:scale(.96)}
.project-grid{width:min(calc(100% - clamp(28px,4vw,70px)),1480px)!important;margin-inline:auto!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;background:transparent!important}
.project-card,.project-card.project-wide,.project-card.landscape-project{grid-column:auto!important;min-height:0!important;aspect-ratio:4/3!important;border-radius:var(--studio-radius-sm)!important;border:1px solid var(--studio-border)!important;background:var(--studio-surface)!important;isolation:isolate;box-shadow:0 12px 34px rgba(0,0,0,.16)!important;transition:transform .5s var(--studio-ease),box-shadow .5s var(--studio-ease),border-color .35s,opacity .35s!important}
.project-card::after{background:linear-gradient(0deg,rgba(0,0,0,.88),rgba(0,0,0,.10) 65%)!important}.project-card::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);pointer-events:none}
.project-card:hover{transform:translateY(-7px)!important;box-shadow:0 30px 80px rgba(0,0,0,.36)!important;border-color:rgba(255,255,255,.22)!important}.project-card:hover img{transform:scale(1.045)!important}.project-card img{transition:transform 1s var(--studio-ease),opacity .45s ease!important}.project-card img.is-loading{opacity:0}.project-card img.is-loaded{opacity:1}
.project-info{left:24px!important;right:24px!important;bottom:22px!important;padding:0!important}.project-info h3{font-size:clamp(23px,2vw,34px)!important;line-height:1!important;letter-spacing:-.045em!important;margin-bottom:8px!important}.project-info p{font-size:11px!important;color:rgba(255,255,255,.67)!important}.project-info span{opacity:0;transform:translateY(7px);transition:opacity .3s,transform .35s var(--studio-ease)!important}.project-card:hover .project-info span{opacity:1;transform:none}
.project-card.hidden{display:none!important}.project-card.filter-enter{animation:filterIn .55s var(--studio-ease) both}@keyframes filterIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

.services{background:#080809!important}.service-item{background:linear-gradient(145deg,#111113,#0c0c0d)!important;border-color:var(--studio-border)!important}.service-item h3{font-size:24px!important}.service-item:hover{border-color:rgba(255,255,255,.2)!important;transform:translateY(-6px)!important}

.process-panel{background:radial-gradient(circle at 85% 10%,#202023 0,transparent 38%),#0d0d0f!important;border:1px solid var(--studio-border)!important;box-shadow:0 35px 110px rgba(0,0,0,.30)!important}.process-panel h2{max-width:1180px!important}.steps div{transition:padding .35s var(--studio-ease),background .3s!important}.steps div:hover{padding-left:14px!important;padding-right:14px!important;background:rgba(255,255,255,.035)!important}.steps span{font-size:clamp(16px,1.5vw,22px)!important}

.contact{background:#080809!important;color:var(--studio-text)!important}.contact-grid{max-width:1480px;margin-left:auto!important;margin-right:auto!important}.contact-top{max-width:1480px;margin-inline:auto}.contact-top h2{color:#fff!important}.contact-grid #contact-form,.contact-details{background:#101012!important;border:1px solid var(--studio-border)!important;border-radius:var(--studio-radius)!important;padding:clamp(25px,4vw,52px)!important;box-shadow:0 22px 70px rgba(0,0,0,.2)!important}.contact-grid label{color:var(--studio-muted)!important}.contact-grid input,.contact-grid textarea,.contact-grid select{background:#080809!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important}.contact-grid input::placeholder,.contact-grid textarea::placeholder{color:#6e6e73}.contact-details a,.contact-details p{color:#fff!important}.submit-btn{background:#fff!important;color:#050505!important;transition:transform .3s var(--studio-ease),box-shadow .3s!important}.submit-btn:hover{background:#fff!important;color:#050505!important;transform:translateY(-3px)!important;box-shadow:0 15px 34px rgba(255,255,255,.12)!important}.whatsapp-link{background:#fff!important;color:#050505!important}
footer{max-width:1480px;margin-inline:auto!important}

.modal{padding:24px!important}.modal-stage{width:min(78vh,820px,86vw)!important;max-height:84vh!important;border:1px solid rgba(255,255,255,.14)!important}.modal-stage img{transition:opacity .22s ease,transform .45s var(--studio-ease)!important}.modal-stage img.switching{opacity:0;transform:scale(.985)}.modal-caption{width:min(78vh,820px,86vw)!important}.modal-close{top:26px!important;right:28px!important;width:48px;height:48px;font-size:30px!important;line-height:1}.modal-nav{width:52px!important;height:52px!important}.modal-caption h3{letter-spacing:-.04em!important}.modal-counter{font-variant-numeric:tabular-nums}

@media(max-width:1180px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:850px){
  .site-header{top:8px!important;width:calc(100% - 16px)!important;padding:11px 12px 11px 16px!important}.site-header.header-hidden{transform:translate(-50%,-145%)!important}
  .main-nav{position:fixed!important;top:74px!important;bottom:auto!important;min-height:calc(100svh - 84px)!important;justify-content:center!important;box-shadow:0 25px 80px rgba(0,0,0,.48)!important}.main-nav a{font-size:clamp(28px,8vw,42px)!important}
  .hero{width:calc(100% - 12px)!important;margin-top:6px!important;border-radius:27px!important}.hero-media{background-position:center 25%!important}.hero h1{font-size:clamp(48px,15vw,78px)!important}.hero-index{display:none!important}
  .project-grid{grid-template-columns:1fr!important;width:calc(100% - 24px)!important;gap:12px!important}.project-card,.project-card.project-wide,.project-card.landscape-project{aspect-ratio:4/3!important;border-radius:20px!important}.project-info{left:20px!important;right:20px!important;bottom:19px!important}.project-info span{display:none!important}
  .filter-row{flex-wrap:nowrap!important;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter{white-space:nowrap!important}
  .process-panel{border-radius:23px!important}.contact-grid #contact-form,.contact-details{border-radius:23px!important;padding:24px!important}
  .modal{padding:76px 12px 22px!important}.modal-stage{width:min(92vw,68vh)!important;max-height:74vh!important;border-radius:22px!important}.modal-stage img{border-radius:18px!important}.modal-caption{width:min(92vw,68vh)!important;padding-right:0!important;margin-bottom:62px!important}.modal-close{top:14px!important;right:14px!important}.modal-prev{left:16px!important;right:auto!important;bottom:18px!important}.modal-next{right:16px!important;bottom:18px!important}
}

/* WhatsApp button text color */
.whatsapp-link,
.whatsapp-link span,
.whatsapp-link:hover,
.whatsapp-link:hover span {
  color: #000 !important;
}

/* =========================================================
   SYSTEM-AWARE LIGHT / DARK THEME — FINAL CONTRAST PASS
   ========================================================= */
:root{
  --theme-bg:#f5f5f7;
  --theme-bg-elevated:#ffffff;
  --theme-surface:rgba(255,255,255,.78);
  --theme-surface-solid:#ffffff;
  --theme-text:#171719;
  --theme-muted:#626269;
  --theme-soft:#85858d;
  --theme-border:rgba(18,18,20,.12);
  --theme-border-strong:rgba(18,18,20,.20);
  --theme-field:#ffffff;
  --theme-shadow:0 24px 72px rgba(24,24,28,.12);
  --theme-header:rgba(248,248,250,.78);
  --theme-filter:rgba(18,18,20,.065);
  --theme-inverse:#ffffff;
  --theme-inverse-text:#09090a;
}
:root[data-theme="dark"]{
  --theme-bg:#050505;
  --theme-bg-elevated:#09090a;
  --theme-surface:rgba(15,15,17,.78);
  --theme-surface-solid:#101012;
  --theme-text:#f5f5f7;
  --theme-muted:#b1b1b8;
  --theme-soft:#888890;
  --theme-border:rgba(255,255,255,.12);
  --theme-border-strong:rgba(255,255,255,.22);
  --theme-field:#080809;
  --theme-shadow:0 28px 88px rgba(0,0,0,.42);
  --theme-header:rgba(10,10,11,.76);
  --theme-filter:rgba(255,255,255,.07);
  --theme-inverse:#ffffff;
  --theme-inverse-text:#070708;
}
html,body{background:var(--theme-bg)!important;color:var(--theme-text)!important}
body,.site-header,.intro,.projects,.services,.process,.contact,footer,
.service-item,.contact-grid #contact-form,.contact-details,.filter,.theme-toggle,
input,textarea,select{transition:background-color .36s ease,color .36s ease,border-color .36s ease,box-shadow .36s ease!important}

.site-header{
  background:var(--theme-header)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 12px 44px rgba(0,0,0,.12)!important;
}
.site-header.scrolled{background:var(--theme-header)!important;border-color:var(--theme-border-strong)!important}
.brand,.main-nav a{color:var(--theme-text)!important}
.brand-sub{color:var(--theme-muted)!important}
.main-nav a:hover{background:var(--theme-filter)!important}
.main-nav .nav-contact{background:var(--theme-text)!important;color:var(--theme-bg)!important}
.main-nav .nav-contact:hover{background:var(--theme-text)!important;color:var(--theme-bg)!important}
.menu-toggle span{background:var(--theme-text)!important}

.theme-toggle{
  display:inline-flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:38px;
  margin:0!important;
  padding:7px 10px!important;
  border:1px solid var(--theme-border)!important;
  background:var(--theme-filter)!important;
  color:var(--theme-text)!important;
  cursor:pointer;
}
.theme-toggle-track{
  position:relative;
  width:38px;
  height:22px;
  flex:0 0 auto;
  border-radius:999px;
  background:rgba(110,110,118,.28);
  box-shadow:inset 0 0 0 1px var(--theme-border);
}
.theme-toggle-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--theme-text);
  box-shadow:0 2px 7px rgba(0,0,0,.24);
  transition:transform .32s cubic-bezier(.2,.8,.2,1),background .3s ease;
}
:root[data-theme="dark"] .theme-toggle-thumb{transform:translateX(16px)}
.theme-toggle-label{font-size:11px;font-weight:650;min-width:28px;text-align:left}
.theme-toggle:hover{background:var(--theme-filter)!important;border-color:var(--theme-border-strong)!important;transform:translateY(-1px)}

.intro,.projects,.services,.contact{background:var(--theme-bg)!important;color:var(--theme-text)!important}
.intro h2,.projects h2,.services h2,.contact h2,.service-item h3,.contact-details a,.contact-details p,footer,.footer-brand{color:var(--theme-text)!important}
.section-label,.intro-copy p,.service-item p,.service-item span,.contact-grid label,.form-note,.contact-details small,footer>p{color:var(--theme-muted)!important}
.text-link{color:var(--theme-text)!important}
.text-link:hover{opacity:.66}

.filter-row{background:var(--theme-filter)!important;border-color:var(--theme-border)!important}
.filter{color:var(--theme-muted)!important;background:transparent!important}
.filter.active,.filter:hover{background:var(--theme-text)!important;color:var(--theme-bg)!important;box-shadow:0 7px 22px rgba(0,0,0,.13)!important}

.project-card,.project-card.project-wide,.project-card.landscape-project{
  background:var(--theme-surface-solid)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 12px 36px rgba(0,0,0,.12)!important;
}
.project-card:hover{border-color:var(--theme-border-strong)!important;box-shadow:var(--theme-shadow)!important}
/* Project text remains white because it sits on photography. */
.project-info h3,.project-info p,.project-info span{color:#fff!important}
.project-info p{color:rgba(255,255,255,.76)!important}
.project-info span{background:rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.16)!important}

.services{background:var(--theme-bg-elevated)!important}
.service-item{
  background:var(--theme-surface-solid)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 12px 38px rgba(0,0,0,.08)!important;
}
.service-item:hover{border-color:var(--theme-border-strong)!important;box-shadow:var(--theme-shadow)!important}

.process{background:var(--theme-bg)!important}
.process-panel{
  background:var(--theme-surface-solid)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
  box-shadow:var(--theme-shadow)!important;
}
.process-panel .section-label,.process-panel h2,.steps b,.steps span{color:var(--theme-text)!important}
.steps div{border-color:var(--theme-border)!important}
.steps div:hover{background:var(--theme-filter)!important}

.contact{background:var(--theme-bg-elevated)!important;color:var(--theme-text)!important}
.contact-top h2{color:var(--theme-text)!important}
.contact-grid #contact-form,.contact-details{
  background:var(--theme-surface-solid)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 18px 58px rgba(0,0,0,.10)!important;
}
.contact-grid input,.contact-grid textarea,.contact-grid select{
  background:var(--theme-field)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}
.contact-grid input::placeholder,.contact-grid textarea::placeholder{color:var(--theme-soft)!important}
.contact-grid input:focus,.contact-grid textarea:focus,.contact-grid select:focus{border-color:var(--theme-text)!important;box-shadow:0 0 0 3px var(--theme-filter)!important}
.submit-btn{
  background:var(--theme-text)!important;
  color:var(--theme-bg)!important;
  border-color:var(--theme-text)!important;
}
.submit-btn span{color:inherit!important}
.submit-btn:hover{background:var(--theme-text)!important;color:var(--theme-bg)!important;opacity:.84}
.whatsapp-link,.whatsapp-link span{
  background:#fff!important;
  color:#000!important;
  border-color:#fff!important;
}
.whatsapp-link:hover,.whatsapp-link:hover span{background:#fff!important;color:#000!important;opacity:.86}

footer{background:var(--theme-bg)!important;border-color:var(--theme-border)!important}
.footer-bottom{border-color:var(--theme-border)!important;color:var(--theme-muted)!important}
.footer-bottom a{color:var(--theme-text)!important}

.modal{background:color-mix(in srgb,var(--theme-bg) 92%,transparent)!important;backdrop-filter:blur(22px) saturate(120%)}
.modal-stage{background:var(--theme-bg-elevated)!important;border-color:var(--theme-border-strong)!important;box-shadow:var(--theme-shadow)!important}
.modal-caption h3,.modal-caption p,.modal-counter{color:var(--theme-text)!important}
.modal-caption p,.modal-counter{color:var(--theme-muted)!important}
.modal-close,.modal-nav{background:var(--theme-surface)!important;color:var(--theme-text)!important;border-color:var(--theme-border)!important}
.modal-close:hover,.modal-nav:hover{background:var(--theme-text)!important;color:var(--theme-bg)!important}
.pointer-glow{opacity:.32}
:root[data-theme="light"] .pointer-glow{opacity:.12}

@media(max-width:850px){
  .main-nav{background:var(--theme-bg-elevated)!important;border-color:var(--theme-border)!important}
  .main-nav a{color:var(--theme-text)!important}
  .theme-toggle{font-size:14px!important;padding:10px 14px!important}
  .theme-toggle-label{font-size:14px}
}

@media (prefers-reduced-motion: reduce){
  .theme-toggle-thumb{transition:none!important}
}

/* Attention treatment for WhatsApp CTA */
.whatsapp-link,
.whatsapp-link span {
  color: #000 !important;
}
.whatsapp-link {
  background: #fff !important;
  border-color: #fff !important;
}
.whatsapp-link > * ,
.whatsapp-link {
  text-shadow: none !important;
}
.whatsapp-link {
  animation: whatsappPulse 1.35s ease-in-out infinite;
}
@keyframes whatsappPulse {
  0%, 100% { color: #000; box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { color: rgba(0,0,0,.18); box-shadow: 0 0 30px rgba(255,255,255,.18); }
}
.whatsapp-link span {
  animation: whatsappTextFlash 1.35s ease-in-out infinite;
}
@keyframes whatsappTextFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: .18; }
}
.whatsapp-link:hover {
  color: #000 !important;
  background: #fff !important;
  animation-play-state: paused;
  opacity: 1 !important;
}
.whatsapp-link:hover span {
  color: #000 !important;
  animation-play-state: paused;
  opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-link,
  .whatsapp-link span {
    animation: none !important;
  }
}

/* Unified contact CTAs: WhatsApp matches Send Inquiry exactly */
.submit-btn,
.whatsapp-link,
.whatsapp-link span {
  animation: none !important;
}
.submit-btn,
.whatsapp-link {
  background: var(--theme-text) !important;
  color: var(--theme-bg) !important;
  border: 1px solid var(--theme-text) !important;
  border-radius: 999px !important;
  padding: 14px 20px !important;
  min-height: 50px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  transition: transform .3s var(--studio-ease), opacity .3s ease, box-shadow .3s ease !important;
  text-shadow: none !important;
}
.submit-btn span,
.whatsapp-link span {
  color: inherit !important;
  background: transparent !important;
  font: inherit !important;
  opacity: 1 !important;
}
.submit-btn:hover,
.whatsapp-link:hover,
.whatsapp-link:hover span {
  background: var(--theme-text) !important;
  color: var(--theme-bg) !important;
  opacity: .84 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--theme-text) 14%, transparent) !important;
}

/* Final WhatsApp CTA behavior: fixed black text; pulse pauses on interaction */
.whatsapp-link,
.whatsapp-link:visited,
.whatsapp-link span,
.whatsapp-link:hover,
.whatsapp-link:hover span,
.whatsapp-link:focus-visible,
.whatsapp-link:focus-visible span {
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  border-color: #fff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}
.whatsapp-link {
  animation: whatsappButtonPulse 1.8s ease-in-out infinite !important;
}
.whatsapp-link span {
  animation: none !important;
  opacity: 1 !important;
}
@keyframes whatsappButtonPulse {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(255,255,255,0); }
  50% { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,.16); }
}
.whatsapp-link:hover,
.whatsapp-link:focus-visible {
  animation-play-state: paused !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(255,255,255,.14) !important;
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-link { animation: none !important; }
}

/* WhatsApp CTA contrast — especially in light mode */
.whatsapp-link,
.whatsapp-link:visited,
.whatsapp-link:hover,
.whatsapp-link:focus-visible,
.whatsapp-link span,
.whatsapp-link:hover span,
.whatsapp-link:focus-visible span {
  background:#ffffff !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
}

:root[data-theme="light"] .whatsapp-link {
  background:#ffffff !important;
  color:#000000 !important;
  border:2px solid #000000 !important;
  box-shadow:0 10px 28px rgba(0,0,0,.16) !important;
}

:root[data-theme="light"] .whatsapp-link:hover,
:root[data-theme="light"] .whatsapp-link:focus-visible {
  background:#ffffff !important;
  color:#000000 !important;
  border-color:#000000 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22) !important;
  animation-play-state:paused !important;
}

/* Careers section */
.careers{
  background:var(--apple-bg);
  color:var(--apple-text);
  padding-top:clamp(110px,13vw,180px)!important;
  padding-bottom:clamp(100px,12vw,170px)!important;
}
.careers-intro{
  display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1.1fr);
  column-gap:clamp(40px,8vw,130px);
  align-items:start;
  margin-bottom:clamp(55px,7vw,95px);
}
.careers-intro .section-label{grid-column:1;grid-row:1}
.careers-intro h2{
  grid-column:2;
  grid-row:1 / span 2;
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","DM Sans",sans-serif;
  font-size:clamp(52px,7vw,108px);
  line-height:.92;
  letter-spacing:-.06em;
  color:var(--apple-text);
}
.careers-intro h2 em{font-style:normal;font-weight:300}
.careers-intro p{
  grid-column:1;
  margin:68px 0 0;
  max-width:420px;
  color:var(--apple-muted);
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.55;
}
.careers-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:clamp(22px,3vw,42px);
  align-items:stretch;
}
.careers-form,.careers-note{
  border:1px solid var(--apple-border);
  border-radius:var(--apple-radius);
  background:var(--apple-card);
  box-shadow:0 18px 60px rgba(0,0,0,.08);
}
.careers-form{padding:clamp(25px,4vw,52px)}
.careers-note{
  padding:clamp(28px,4vw,50px);
  display:flex;
  flex-direction:column;
  min-height:100%;
}
.careers-number{font-size:12px;color:var(--apple-muted);letter-spacing:.16em}
.careers-note h3{
  margin:auto 0 20px;
  max-width:390px;
  font-size:clamp(34px,4vw,60px);
  line-height:.96;
  letter-spacing:-.05em;
  color:var(--apple-text);
}
.careers-note p{color:var(--apple-muted);font-size:17px;line-height:1.55;max-width:420px}
.careers-email{margin-top:45px;padding-top:22px;border-top:1px solid var(--apple-border)}
.careers-email small{display:block;color:var(--apple-muted);text-transform:uppercase;letter-spacing:.14em;font-size:9px;margin-bottom:9px}
.careers-email a{color:var(--apple-text);font-weight:600;word-break:break-word}
.careers-submit{margin-top:5px}
@media(max-width:900px){
  .careers-intro,.careers-grid{grid-template-columns:1fr}
  .careers-intro .section-label,.careers-intro h2,.careers-intro p{grid-column:1;grid-row:auto}
  .careers-intro h2{margin-top:22px}
  .careers-intro p{margin-top:28px}
  .careers-note{min-height:420px}
}

/* =========================================================
   CALM / COMPACT REFINEMENT — FINAL OVERRIDE
   Keeps projects, galleries, careers, theme switching and contact workflows.
   ========================================================= */
:root{
  --calm-radius:22px;
  --calm-radius-sm:16px;
  --calm-shadow:0 14px 44px rgba(0,0,0,.10);
  --calm-shadow-dark:0 16px 48px rgba(0,0,0,.28);
}

/* More controlled global rhythm and typography */
.section-pad{
  padding-left:clamp(20px,4.4vw,72px)!important;
  padding-right:clamp(20px,4.4vw,72px)!important;
}
.section-label,.eyebrow{font-size:9px!important;letter-spacing:.14em!important}
.intro h2,.projects h2,.services h2,.contact h2,
.careers-intro h2,.process-panel h2{
  letter-spacing:-.05em!important;
}
.intro h2,.projects-head h2,.services h2{font-size:clamp(40px,5.2vw,76px)!important}
.contact h2{font-size:clamp(46px,6.4vw,92px)!important}
.intro-copy p{font-size:clamp(16px,1.25vw,20px)!important;line-height:1.52!important}
.service-item p,.careers-note p{font-size:15px!important;line-height:1.55!important}

/* Smaller, quieter navigation */
.site-header{
  top:10px!important;
  width:min(calc(100% - 20px),1380px)!important;
  height:56px!important;
  padding:8px 11px 8px 18px!important;
  border-radius:18px!important;
  box-shadow:0 8px 28px rgba(0,0,0,.09)!important;
}
:root[data-theme="dark"] .site-header{box-shadow:0 9px 30px rgba(0,0,0,.24)!important}
.site-header.scrolled{top:7px!important;height:54px!important;box-shadow:0 10px 34px rgba(0,0,0,.12)!important}
.brand{padding:2px 0!important}
.brand-name{font-size:13px!important}
.brand-sub{font-size:7px!important;letter-spacing:.45em!important;margin-top:6px!important}
.main-nav{gap:3px!important;font-size:11px!important}
.main-nav a{font-size:11px!important;padding:8px 11px!important}
.main-nav .nav-contact{padding:8px 13px!important}
.theme-toggle{min-height:34px!important;padding:5px 8px!important;gap:7px!important}
.theme-toggle-track{width:34px!important;height:20px!important}
.theme-toggle-thumb{width:14px!important;height:14px!important}
:root[data-theme="dark"] .theme-toggle-thumb{transform:translateX(14px)!important}
.theme-toggle-label{font-size:10px!important;min-width:25px!important}

/* Reduced hero scale */
.hero{
  width:calc(100% - 16px)!important;
  min-height:min(88svh,860px)!important;
  margin:8px auto 0!important;
  border-radius:28px!important;
  box-shadow:0 18px 58px rgba(0,0,0,.20)!important;
}
.hero-media{animation-duration:22s!important}
.hero:hover .hero-media{transform:scale(1.018)!important}
.hero-content{
  padding-left:clamp(24px,4.6vw,72px)!important;
  padding-right:clamp(24px,4.6vw,72px)!important;
  padding-bottom:clamp(48px,7vh,78px)!important;
  max-width:920px!important;
}
.hero h1{
  font-size:clamp(46px,7.2vw,110px)!important;
  line-height:.88!important;
  margin:14px 0 18px!important;
  max-width:940px!important;
}
.hero-copy{font-size:clamp(14px,1.2vw,18px)!important;line-height:1.48!important;max-width:540px!important}
.circle-link{
  padding:11px 15px!important;
  margin-top:21px!important;
  gap:18px!important;
  box-shadow:0 7px 22px rgba(0,0,0,.14)!important;
}
.circle-link span{font-size:11px!important}.circle-link b{font-size:15px!important}

/* Tighter section spacing */
.intro{padding-top:clamp(82px,9vw,128px)!important;padding-bottom:clamp(82px,9vw,128px)!important}
.intro-grid{gap:clamp(34px,6vw,90px)!important}
.intro-copy{padding-top:18px!important}
.intro-copy p{margin-bottom:18px!important}
.text-link{margin-top:12px!important;font-size:11px!important}
.projects{padding-bottom:clamp(76px,8vw,120px)!important}
.projects-head{padding-top:18px!important;padding-bottom:34px!important}
.filter-row{padding:4px!important}
.filter{padding:8px 13px!important;font-size:11px!important}
.services{padding-top:clamp(78px,8.5vw,124px)!important;padding-bottom:clamp(78px,8.5vw,124px)!important}
.service-list{margin-top:38px!important;gap:14px!important}
.service-item{padding:24px!important;min-height:152px!important;border-radius:var(--calm-radius-sm)!important}
.service-item h3{font-size:21px!important}
.contact{padding-top:clamp(82px,9vw,132px)!important;padding-bottom:clamp(74px,8vw,116px)!important}
.contact-grid{margin-top:48px!important;gap:clamp(18px,3vw,42px)!important}
footer{padding-top:58px!important;padding-bottom:24px!important}
.footer-bottom{margin-top:58px!important}

/* More compact portfolio cards */
.project-grid{
  width:min(calc(100% - clamp(24px,3.4vw,56px)),1400px)!important;
  gap:13px!important;
}
.project-card,.project-card.project-wide,.project-card.landscape-project{
  aspect-ratio:1.28 / 1!important;
  border-radius:var(--calm-radius-sm)!important;
  box-shadow:0 7px 24px rgba(0,0,0,.08)!important;
  transition:transform .42s var(--studio-ease),box-shadow .42s ease,border-color .3s ease,opacity .3s ease!important;
}
:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .project-card.project-wide,
:root[data-theme="dark"] .project-card.landscape-project{box-shadow:0 9px 28px rgba(0,0,0,.22)!important}
.project-card:hover{transform:translateY(-3px)!important;box-shadow:var(--calm-shadow)!important}
:root[data-theme="dark"] .project-card:hover{box-shadow:var(--calm-shadow-dark)!important}
.project-card:hover img{transform:scale(1.025)!important}
.project-card img{transition:transform .8s var(--studio-ease),opacity .4s ease!important}
.project-info{left:18px!important;right:18px!important;bottom:17px!important}
.project-info h3{font-size:clamp(20px,1.65vw,28px)!important;margin-bottom:5px!important}
.project-info p{font-size:10px!important}
.project-info span{font-size:10px!important;padding:7px 10px!important}

/* Softer cards and fields */
.service-item,.process-panel,.contact-grid #contact-form,.contact-details,
.careers-form,.careers-note,.modal-stage{
  box-shadow:var(--calm-shadow)!important;
}
:root[data-theme="dark"] .service-item,
:root[data-theme="dark"] .process-panel,
:root[data-theme="dark"] .contact-grid #contact-form,
:root[data-theme="dark"] .contact-details,
:root[data-theme="dark"] .careers-form,
:root[data-theme="dark"] .careers-note,
:root[data-theme="dark"] .modal-stage{box-shadow:var(--calm-shadow-dark)!important}
.process{padding:clamp(10px,2vw,28px)!important}
.process-panel{
  min-height:clamp(520px,70vh,720px)!important;
  padding:clamp(58px,7vw,104px) clamp(26px,7vw,112px)!important;
  border-radius:var(--calm-radius)!important;
}
.process-panel h2{font-size:clamp(46px,7vw,96px)!important;margin:20px 0 44px!important}
.steps div{padding:17px 0!important}
.steps div:hover{padding-left:8px!important;padding-right:8px!important}
.steps span{font-size:clamp(15px,1.25vw,19px)!important}
.contact-grid #contact-form,.contact-details{
  border-radius:var(--calm-radius)!important;
  padding:clamp(22px,3.3vw,42px)!important;
}
label{font-size:9px!important;margin-bottom:22px!important}
input,textarea,select{font-size:14px!important;padding:12px 13px!important;border-radius:11px!important}
.submit-btn,.whatsapp-link{
  min-height:44px!important;
  padding:11px 16px!important;
  font-size:11px!important;
  gap:18px!important;
}
.contact-details div{margin-bottom:28px!important}
.contact-details a,.contact-details p{font-size:16px!important}

/* Careers retained, with calmer scale */
.careers{
  padding-top:clamp(82px,9vw,130px)!important;
  padding-bottom:clamp(78px,8.5vw,124px)!important;
  background:var(--theme-bg)!important;
  color:var(--theme-text)!important;
}
.careers-intro{column-gap:clamp(30px,6vw,88px)!important;margin-bottom:clamp(38px,5vw,64px)!important}
.careers-intro h2{font-size:clamp(44px,5.8vw,82px)!important;color:var(--theme-text)!important}
.careers-intro p{margin-top:48px!important;font-size:clamp(15px,1.15vw,18px)!important;color:var(--theme-muted)!important}
.careers-grid{gap:clamp(16px,2.2vw,30px)!important}
.careers-form,.careers-note{
  border-radius:var(--calm-radius)!important;
  background:var(--theme-surface-solid)!important;
  border-color:var(--theme-border)!important;
}
.careers-form{padding:clamp(22px,3.3vw,42px)!important}
.careers-note{padding:clamp(24px,3.4vw,42px)!important}
.careers-note h3{font-size:clamp(30px,3.4vw,48px)!important;color:var(--theme-text)!important}
.careers-note p,.careers-number,.careers-email small{color:var(--theme-muted)!important}
.careers-email{margin-top:32px!important;border-color:var(--theme-border)!important}
.careers-email a{color:var(--theme-text)!important}

/* Calmer motion */
.reveal-ready{
  opacity:0;
  transform:translateY(18px);
  filter:none!important;
  transition:opacity .62s ease,transform .7s var(--studio-ease)!important;
}
.project-card.reveal-ready:nth-child(even),.project-card.reveal-ready:nth-child(3n){transition-delay:.035s!important}
.project-card.filter-enter{animation:calmFilterIn .42s var(--studio-ease) both!important}
@keyframes calmFilterIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.pointer-glow{width:320px!important;height:320px!important;opacity:.14!important}
:root[data-theme="light"] .pointer-glow{opacity:.07!important}
.whatsapp-link{animation:calmWhatsAppPulse 2.8s ease-in-out infinite!important}
@keyframes calmWhatsAppPulse{
  0%,100%{transform:translateY(0);box-shadow:0 7px 20px rgba(0,0,0,.08)}
  50%{transform:translateY(-1px);box-shadow:0 10px 25px rgba(0,0,0,.12)}
}

/* Better tablet proportions */
@media(max-width:1180px){
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hero{min-height:min(84svh,780px)!important}
  .hero h1{font-size:clamp(46px,8.8vw,92px)!important}
  .services-grid{gap:clamp(32px,5vw,62px)!important}
}

@media(max-width:900px){
  .site-header{top:7px!important;width:calc(100% - 14px)!important;height:54px!important;border-radius:16px!important;padding:8px 10px 8px 15px!important}
  .main-nav{
    top:66px!important;left:7px!important;right:7px!important;
    min-height:calc(100svh - 73px)!important;
    border-radius:20px!important;padding:24px!important;
  }
  .main-nav a{font-size:clamp(23px,6.4vw,34px)!important;padding:8px 12px!important}
  .main-nav .nav-contact{padding:10px 16px!important}
  .theme-toggle{font-size:12px!important;padding:7px 10px!important}
  .theme-toggle-label{font-size:12px!important}
  .hero{width:calc(100% - 10px)!important;min-height:82svh!important;margin-top:5px!important;border-radius:22px!important}
  .hero-content{padding-left:22px!important;padding-right:22px!important;padding-bottom:48px!important}
  .hero h1{font-size:clamp(43px,13vw,68px)!important;line-height:.9!important}
  .hero-copy{font-size:14px!important;max-width:460px!important}
  .circle-link{display:inline-flex!important;padding:10px 14px!important}
  .intro,.services,.careers,.contact{padding-top:72px!important;padding-bottom:72px!important}
  .intro h2,.projects-head h2,.services h2,.careers-intro h2{font-size:clamp(38px,10vw,60px)!important}
  .contact h2{font-size:clamp(42px,11vw,66px)!important}
  .projects-head{gap:22px!important;padding-bottom:26px!important}
  .filter-row{margin-top:22px!important}
  .project-grid{width:calc(100% - 20px)!important;gap:11px!important}
  .project-card,.project-card.project-wide,.project-card.landscape-project{aspect-ratio:1.3/1!important;border-radius:16px!important}
  .project-info{left:17px!important;right:17px!important;bottom:16px!important}
  .process{padding:7px!important}
  .process-panel{min-height:62svh!important;padding:58px 24px!important;border-radius:19px!important}
  .process-panel h2{font-size:clamp(42px,11.5vw,66px)!important;margin-bottom:34px!important}
  .careers-intro h2{margin-top:16px!important}
  .careers-intro p{margin-top:20px!important}
  .careers-note{min-height:320px!important}
  .contact-grid{margin-top:34px!important;gap:16px!important}
  .contact-grid #contact-form,.contact-details,.careers-form,.careers-note{border-radius:18px!important;padding:22px!important}
}

@media(max-width:600px){
  .brand-name{font-size:12px!important}.brand-sub{font-size:6px!important}
  .menu-toggle{width:36px!important;height:36px!important}
  .hero{min-height:76svh!important}
  .hero-media{background-position:center 24%!important}
  .hero h1{font-size:clamp(40px,12.5vw,58px)!important}
  .hero-copy{max-width:330px!important}
  .circle-link{margin-top:16px!important}
  .section-pad{padding-left:18px!important;padding-right:18px!important}
  .intro-grid,.services-grid{gap:28px!important}
  .project-grid{width:calc(100% - 14px)!important;gap:9px!important}
  .project-card,.project-card.project-wide,.project-card.landscape-project{aspect-ratio:1.18/1!important;border-radius:14px!important}
  .project-info h3{font-size:21px!important}
  .project-info p{font-size:9px!important}
  .service-list{gap:10px!important}.service-item{min-height:132px!important;padding:20px!important}
  .process-panel{min-height:auto!important;padding:52px 20px!important}
  .steps div{padding:15px 0!important}
  .field-row{gap:0!important}
  .modal-stage{border-radius:18px!important}.modal-stage img{border-radius:14px!important}
  footer{padding-left:18px!important;padding-right:18px!important}
}

/* Hero contrast and CTA positioning safeguard */
.hero,.hero h1,.hero .eyebrow{color:#fff!important}
.circle-link{
  position:static!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;
}
@media(max-width:600px){
  .circle-link{width:max-content!important;max-width:100%!important}
}


/* ==========================================================
   RESTRAINED CREATIVE-DESIGNER LAYER
   Architectural motion, tactile interactions and accessibility
   ========================================================== */

/* Hero architectural atmosphere */
.hero-overlay{z-index:1}
.hero-grid-atmosphere{
  position:absolute;
  inset:-12%;
  z-index:2;
  pointer-events:none;
  opacity:.17;
  background-image:
    linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:clamp(72px,8vw,124px) clamp(72px,8vw,124px),clamp(72px,8vw,124px) clamp(72px,8vw,124px),18px 18px,18px 18px;
  mask-image:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.42) 56%,transparent 94%);
  transform:perspective(900px) rotateX(58deg) rotateZ(-8deg) scale(1.2);
  transform-origin:50% 78%;
  animation:architecturalGridDrift 18s linear infinite;
}
@keyframes architecturalGridDrift{
  0%{background-position:0 0,0 0,0 0,0 0}
  100%{background-position:124px 62px,124px 62px,36px 18px,36px 18px}
}
.hero-content{z-index:4}
.hero-index{z-index:4}
.hero-geometry{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.geometry{position:absolute;display:block;opacity:.48;will-change:transform}
.geometry-ring{
  width:clamp(84px,10vw,156px);height:clamp(84px,10vw,156px);
  border:1px solid rgba(255,255,255,.54);border-radius:50%;
  right:10vw;top:22%;
  animation:geometryFloatOne 10s ease-in-out infinite;
}
.geometry-ring::after{content:"";position:absolute;inset:18%;border:1px dashed rgba(255,255,255,.28);border-radius:inherit}
.geometry-square{
  width:clamp(48px,5vw,78px);height:clamp(48px,5vw,78px);
  border:1px solid rgba(255,255,255,.5);
  right:28vw;top:13%;transform:rotate(18deg);
  animation:geometryFloatTwo 12s ease-in-out infinite;
}
.geometry-line{
  width:clamp(120px,18vw,280px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  right:6vw;bottom:28%;transform:rotate(-31deg);
  animation:geometryFloatThree 9s ease-in-out infinite;
}
.geometry-line::before{content:"";position:absolute;right:20%;top:-3px;width:7px;height:7px;border:1px solid rgba(255,255,255,.72);border-radius:50%}
@keyframes geometryFloatOne{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(-14px,18px,0) rotate(8deg)}}
@keyframes geometryFloatTwo{0%,100%{transform:translate3d(0,0,0) rotate(18deg)}50%{transform:translate3d(12px,-15px,0) rotate(29deg)}}
@keyframes geometryFloatThree{0%,100%{transform:translate3d(0,0,0) rotate(-31deg)}50%{transform:translate3d(-18px,-8px,0) rotate(-27deg)}}

/* Moving studio disciplines ticker */
.discipline-ticker{
  position:relative;overflow:hidden;
  background:var(--theme-bg,#050505);color:var(--theme-text,#f4f1e9);
  border-top:1px solid var(--theme-border,rgba(255,255,255,.14));
  border-bottom:1px solid var(--theme-border,rgba(255,255,255,.14));
  padding:12px 0;
}
.discipline-ticker::before,.discipline-ticker::after{content:"";position:absolute;z-index:2;top:0;bottom:0;width:7vw;pointer-events:none}
.discipline-ticker::before{left:0;background:linear-gradient(90deg,var(--theme-bg,#050505),transparent)}
.discipline-ticker::after{right:0;background:linear-gradient(-90deg,var(--theme-bg,#050505),transparent)}
.discipline-ticker-track{display:flex;width:max-content;animation:disciplineTicker 34s linear infinite;will-change:transform}
.discipline-ticker-set{display:flex;align-items:center;white-space:nowrap}
.discipline-ticker span{font-size:10px;line-height:1;text-transform:uppercase;letter-spacing:.2em;font-weight:500;padding:0 22px}
.discipline-ticker i{font-style:normal;font-size:13px;opacity:.42}
@keyframes disciplineTicker{to{transform:translateX(-50%)}}

/* Numbered project covers + subtle perspective spotlight */
.project-card{
  --card-rx:0deg;--card-ry:0deg;--card-lift:0px;
  --spot-x:50%;--spot-y:50%;
  transform:perspective(1100px) rotateX(var(--card-rx)) rotateY(var(--card-ry)) translateY(var(--card-lift))!important;
  transform-style:preserve-3d;
  will-change:transform;
}
.project-card:hover{--card-lift:-3px}
.project-card img{z-index:0}
.project-card::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle 210px at var(--spot-x) var(--spot-y),rgba(255,255,255,.18),rgba(255,255,255,.045) 34%,transparent 72%);
  opacity:0;transition:opacity .35s ease;
}
.project-card:hover::before,.project-card.is-pointer-active::before{opacity:1}
.project-card::after{z-index:1}
.project-number{
  position:absolute;z-index:3;top:15px;left:16px;
  display:grid;place-items:center;min-width:35px;height:27px;padding:0 8px;
  border:1px solid rgba(255,255,255,.48);border-radius:999px;
  background:rgba(7,7,7,.2);backdrop-filter:blur(9px);
  color:#fff;font-size:9px;font-weight:600;letter-spacing:.16em;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.project-card:hover .project-number{background:rgba(255,255,255,.9);color:#0a0a0a;border-color:rgba(255,255,255,.9)}

/* Designer dot cursor — pointer-accurate desktops only */
.designer-cursor{
  position:fixed;z-index:9999;left:0;top:0;width:8px;height:8px;border-radius:50%;
  background:var(--theme-text,#fff);box-shadow:0 0 0 1px rgba(0,0,0,.15);
  pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0);
  transition:width .2s ease,height .2s ease,opacity .2s ease,background .2s ease;
  mix-blend-mode:difference;
}
.designer-cursor.is-visible{opacity:1}
.designer-cursor.is-active{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){
  body.cursor-enhanced,body.cursor-enhanced a,body.cursor-enhanced button,body.cursor-enhanced .project-card,body.cursor-enhanced input,body.cursor-enhanced textarea,body.cursor-enhanced select{cursor:none!important}
}
@media (hover:none),(pointer:coarse){.designer-cursor,.pointer-glow{display:none!important}}

/* Magnetic primary actions */
.submit-btn,.whatsapp-link,.nav-contact,.circle-link{
  --mag-x:0px;--mag-y:0px;
  translate:var(--mag-x) var(--mag-y);
  transition:translate .32s cubic-bezier(.2,.8,.2,1),background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease!important;
  will-change:translate;
}

/* Animated service-line details */
.service-item{position:relative;overflow:hidden;isolation:isolate}
.service-item::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--theme-text,#fff),transparent);
  opacity:.32;transform:translateX(-102%);
  animation:serviceLineScan 7.5s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:var(--service-delay,0s);
}
.service-item::after{
  content:"";position:absolute;right:17px;top:17px;width:17px;height:17px;
  border-top:1px solid var(--theme-border,rgba(255,255,255,.24));
  border-right:1px solid var(--theme-border,rgba(255,255,255,.24));
  opacity:.55;transition:width .4s ease,height .4s ease,opacity .4s ease;
}
.service-item:hover::after{width:29px;height:29px;opacity:1}
.service-item:nth-child(2){--service-delay:1.35s}.service-item:nth-child(3){--service-delay:2.7s}.service-item:nth-child(4){--service-delay:4.05s}
@keyframes serviceLineScan{0%,72%{transform:translateX(-102%);opacity:0}78%{opacity:.38}92%{opacity:.38}100%{transform:translateX(102%);opacity:0}}

/* Vertical page progress */
.page-progress{
  position:fixed;z-index:55;right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--theme-text,#fff);pointer-events:none;
}
.page-progress-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  text-transform:uppercase;letter-spacing:.22em;font-size:7px;opacity:.48;
}
.page-progress-track{position:relative;width:1px;height:112px;background:var(--theme-border,rgba(255,255,255,.22));overflow:hidden}
.page-progress-fill{position:absolute;inset:0;background:var(--theme-text,#fff);transform:scaleY(0);transform-origin:top;will-change:transform}
.page-progress-value{font-size:8px;letter-spacing:.12em;opacity:.68;min-width:20px;text-align:center}

/* Strong keyboard visibility remains available under custom interaction */
:focus-visible{outline:2px solid var(--accent,#ff4d00)!important;outline-offset:4px}

/* Mobile-safe restraint */
@media(max-width:900px){
  .page-progress{display:none}
  .hero-grid-atmosphere{opacity:.11;inset:-6%;transform:perspective(800px) rotateX(60deg) rotateZ(-8deg) scale(1.3)}
  .geometry-ring{right:-20px;top:18%;opacity:.35}
  .geometry-square{right:18%;top:12%;opacity:.28}
  .geometry-line{right:-40px;bottom:30%;opacity:.3}
  .discipline-ticker{padding:10px 0}
  .discipline-ticker span{font-size:9px;padding:0 16px}
  .project-card{transform:none!important;transform-style:flat;will-change:auto}
  .project-card::before{display:none}
  .project-number{top:12px;left:12px;min-width:32px;height:25px;font-size:8px}
  .submit-btn,.whatsapp-link,.nav-contact,.circle-link{translate:none!important;will-change:auto}
}
@media(max-width:600px){
  .hero-geometry{opacity:.75}
  .geometry-square{display:none}
  .discipline-ticker-track{animation-duration:27s}
  .service-item::after{right:14px;top:14px;width:14px;height:14px}
}

/* Accessibility: no continuous or pointer-driven motion when reduced motion is requested */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-grid-atmosphere{animation:none!important}
  .hero-geometry .geometry{animation:none!important}
  .discipline-ticker-track{animation:none!important;transform:none!important}
  .discipline-ticker-set[aria-hidden="true"]{display:none!important}
  .project-card{transform:none!important}
  .project-card::before{display:none!important}
  .designer-cursor,.pointer-glow{display:none!important}
  body.cursor-enhanced,body.cursor-enhanced *{cursor:auto!important}
  .submit-btn,.whatsapp-link,.nav-contact,.circle-link{translate:none!important}
  .page-progress-fill{transition:none!important}
  .service-item::before{animation:none!important;transform:none!important;opacity:.22!important}
}

/* Contrast-safe fixed interaction markers */
.designer-cursor{background:#fff}
.page-progress{color:#fff;mix-blend-mode:difference}
.page-progress-track{background:rgba(255,255,255,.28)}
.page-progress-fill{background:#fff}

/* =========================================================
   AESTHETIC EXPERIENCE LAYER — restrained editorial details
   ========================================================= */

/* Brief opening reveal: fast enough to feel intentional, not like a loader. */
.site-intro{
  position:fixed;inset:0;z-index:10050;display:grid;place-items:center;
  pointer-events:none;overflow:hidden;color:#f6f3ec;
  animation:introRemove .01s linear 2.55s forwards;
}
.site-intro-panel{position:absolute;inset:0;background:#080808;will-change:transform}
.intro-panel-a{clip-path:polygon(0 0,50.1% 0,50.1% 100%,0 100%);animation:introPanelLeft 1.05s cubic-bezier(.76,0,.24,1) 1.42s forwards}
.intro-panel-b{clip-path:polygon(49.9% 0,100% 0,100% 100%,49.9% 100%);animation:introPanelRight 1.05s cubic-bezier(.76,0,.24,1) 1.42s forwards}
.site-intro-mark{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;animation:introMark .62s ease 1.28s forwards}
.site-intro-mark b{font-size:clamp(18px,2vw,28px);letter-spacing:.12em;font-weight:600}
.site-intro-mark small{font-size:8px;letter-spacing:.3em;opacity:.58}
@keyframes introPanelLeft{to{transform:translateX(-101%)}}
@keyframes introPanelRight{to{transform:translateX(101%)}}
@keyframes introMark{to{opacity:0;transform:translateY(-8px)}}
@keyframes introRemove{to{visibility:hidden}}

/* Ambient material-like light: extremely low contrast and theme-aware. */
.ambient-canvas{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.42}
.ambient-canvas span{position:absolute;width:44vw;aspect-ratio:1;border-radius:50%;filter:blur(90px);will-change:transform}
.ambient-canvas span:first-child{left:-24vw;top:20vh;background:color-mix(in srgb,var(--apple-blue,#2997ff) 10%,transparent);animation:ambientDriftA 18s ease-in-out infinite alternate}
.ambient-canvas span:last-child{right:-28vw;top:58vh;background:color-mix(in srgb,var(--apple-text,#fff) 7%,transparent);animation:ambientDriftB 22s ease-in-out infinite alternate}
@keyframes ambientDriftA{to{transform:translate3d(9vw,16vh,0) scale(1.08)}}
@keyframes ambientDriftB{to{transform:translate3d(-8vw,-14vh,0) scale(.92)}}

/* Editorial hero annotations and controlled title entry. */
.hero-annotations{
  position:absolute;z-index:4;right:clamp(22px,4vw,64px);bottom:clamp(28px,5vw,72px);
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;color:rgba(255,255,255,.64);
}
.hero-annotations span{font-size:8px;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hero-annotations b{display:inline-block;width:24px;color:#fff;font-weight:600}
.hero-content .eyebrow{animation:heroTextIn .8s cubic-bezier(.2,.8,.2,1) .92s both}
.hero-content h1{animation:heroTitleIn 1s cubic-bezier(.16,1,.3,1) 1s both;transform-origin:left bottom}
.hero-content .hero-copy,.hero-content .circle-link{animation:heroTextIn .9s cubic-bezier(.2,.8,.2,1) 1.16s both}
.hero-annotations,.hero-index{animation:heroTextIn .8s ease 1.25s both}
@keyframes heroTitleIn{from{opacity:0;transform:translateY(40px) skewY(2deg);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroTextIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Large chapter words create rhythm without adding visual clutter. */
section[data-chapter]{position:relative;isolation:isolate;overflow:hidden}
section[data-chapter]::before{
  content:attr(data-chapter);position:absolute;z-index:-1;right:-.035em;top:.03em;
  font-size:clamp(72px,14vw,230px);line-height:.8;font-weight:700;letter-spacing:-.065em;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--apple-text,#fff) 9%,transparent);
  opacity:.72;white-space:nowrap;pointer-events:none;transform:translate3d(var(--chapter-shift,0px),0,0);
}
section[data-chapter] > *{position:relative;z-index:1}
.process[data-chapter]::before{z-index:1;color:transparent;-webkit-text-stroke-color:rgba(255,255,255,.12);right:-.02em;top:.08em}
.process[data-chapter] > *{z-index:2}

/* Current navigation state: quiet, clear orientation. */
.main-nav a{position:relative}
.main-nav a:not(.nav-contact)::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .38s cubic-bezier(.2,.8,.2,1);opacity:.72;
}
.main-nav a:not(.nav-contact):hover::after,.main-nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.main-nav a.is-current{opacity:1}

/* Project frame marks and richer but restrained image response. */
.card-mark{position:absolute;z-index:3;inset:12px;pointer-events:none;opacity:.62;transition:opacity .35s ease,inset .45s cubic-bezier(.2,.8,.2,1)}
.card-mark::before,.card-mark::after{content:"";position:absolute;width:13px;height:13px;border-color:rgba(255,255,255,.72);border-style:solid}
.card-mark::before{left:0;bottom:0;border-width:0 0 1px 1px}
.card-mark::after{right:0;top:0;border-width:1px 1px 0 0}
.project-card:hover .card-mark{inset:17px;opacity:1}
.project-card img{transition:transform 1s cubic-bezier(.16,1,.3,1),filter .65s ease,opacity .5s ease!important}
.project-card:hover img{transform:scale(1.035)!important;filter:saturate(.92) contrast(1.03)}
.project-info h3{transition:letter-spacing .45s cubic-bezier(.2,.8,.2,1)}
.project-card:hover .project-info h3{letter-spacing:.012em}

/* Small kinetic rules on labels and links. */
.section-label{display:flex;align-items:center;gap:10px}
.section-label::before{content:"";width:18px;height:1px;background:currentColor;opacity:.5;transform-origin:left;transition:width .45s cubic-bezier(.2,.8,.2,1)}
section:hover > .section-label::before,.projects-head:hover .section-label::before,.contact-top:hover .section-label::before,.careers-intro:hover .section-label::before{width:34px}
.text-link{position:relative;display:inline-flex;overflow:hidden}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:translateX(-105%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.text-link:hover::after{transform:translateX(0)}
.text-link span{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.text-link:hover span{transform:translateX(4px)}

/* Premium button light sweep and form focus response. */
.submit-btn,.whatsapp-link,.nav-contact{position:relative;overflow:hidden;isolation:isolate}
.submit-btn::before,.whatsapp-link::before,.nav-contact::before{
  content:"";position:absolute;z-index:-1;inset:-70% -30%;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.24) 49%,transparent 60%);
  transform:translateX(-72%) rotate(8deg);transition:transform .75s cubic-bezier(.2,.8,.2,1);
}
.submit-btn:hover::before,.whatsapp-link:hover::before,.nav-contact:hover::before{transform:translateX(72%) rotate(8deg)}
label{transition:color .25s ease}
label:focus-within{color:var(--apple-blue,#2997ff)}
label:focus-within input,label:focus-within textarea,label:focus-within select{transform:translateY(-1px)}

/* Modal image progress line. */
.modal-caption::after{content:"";position:absolute;left:0;bottom:-11px;width:var(--gallery-progress,0%);height:1px;background:rgba(255,255,255,.8);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.modal-caption{position:relative}

@media(max-width:900px){
  .site-intro-mark b{font-size:17px}
  .hero-annotations{right:18px;bottom:20px;gap:5px}
  .hero-annotations span:nth-child(3){display:none}
  section[data-chapter]::before{font-size:clamp(60px,18vw,130px);top:.1em;opacity:.5}
  .project-card img{transition:transform .6s ease,opacity .5s ease!important}
  .project-card:hover img{transform:none!important;filter:none}
  .card-mark{inset:10px;opacity:.45}
  .main-nav a:not(.nav-contact)::after{bottom:-3px}
}
@media(max-width:600px){
  .hero-annotations{display:none}
  section[data-chapter]::before{right:-.08em;font-size:23vw;-webkit-text-stroke-width:.75px}
  .ambient-canvas{opacity:.24}
  .card-mark{display:none}
  .site-intro-mark small{letter-spacing:.22em}
}
@media(prefers-reduced-motion:reduce){
  .site-intro{display:none!important}
  .ambient-canvas span,.hero-content .eyebrow,.hero-content h1,.hero-content .hero-copy,.hero-content .circle-link,.hero-annotations,.hero-index{animation:none!important}
  section[data-chapter]::before{transform:none!important}
  .submit-btn::before,.whatsapp-link::before,.nav-contact::before{display:none!important}
}


/* Simplified careers invitation: one direct, intentional portfolio action. */
.careers-intro-simple{margin-bottom:clamp(34px,5vw,66px)!important}
.careers-action-panel{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:clamp(24px,3.6vw,46px);border:1px solid var(--theme-border);
  border-radius:clamp(18px,2.2vw,28px);background:var(--theme-surface);
  box-shadow:0 16px 48px rgba(0,0,0,.055);
}
.careers-action-copy{display:flex;align-items:flex-start;gap:clamp(18px,3vw,42px);max-width:660px}
.careers-action-copy p{margin:0;color:var(--theme-muted);font-size:clamp(14px,1.15vw,17px);line-height:1.6}
.careers-portfolio-btn{
  flex:0 0 auto;min-width:clamp(190px,18vw,245px);align-items:center;
  border-radius:999px!important;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,background-color .35s ease!important;
}
.careers-portfolio-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.15)}
:root[data-theme="dark"] .careers-action-panel{box-shadow:0 18px 54px rgba(0,0,0,.18)}
@media(max-width:700px){
  .careers-action-panel{align-items:stretch;flex-direction:column;padding:22px;border-radius:18px}
  .careers-action-copy{gap:16px}
  .careers-portfolio-btn{width:100%;min-width:0}
}


/* Professional footer — authorship, rights and studio links */
.professional-footer{
  width:min(calc(100% - clamp(36px,8vw,120px)),1480px)!important;
  max-width:1480px!important;
  margin:0 auto!important;
  padding:clamp(58px,7vw,92px) 0 clamp(24px,3vw,38px)!important;
  background:var(--theme-bg)!important;
  color:var(--theme-text)!important;
}
.footer-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:clamp(36px,7vw,110px);
}
.footer-identity .footer-brand{margin:0 0 24px!important}
.footer-identity>p{
  max-width:520px;
  margin:0;
  color:var(--theme-muted)!important;
  font-size:clamp(13px,1.15vw,16px);
  line-height:1.65;
}
.footer-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px 24px;
}
.footer-links a{
  position:relative;
  color:var(--theme-text)!important;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:8px 0;
}
.footer-links a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:1px;
  background:currentColor;
  transition:right .32s var(--studio-ease, ease);
}
.footer-links a:hover::after{right:0}
.footer-legal{
  display:grid;
  grid-template-columns:auto minmax(280px,1fr) auto;
  align-items:start;
  gap:18px clamp(24px,4vw,64px);
  margin-top:clamp(46px,6vw,78px);
  padding-top:20px;
  border-top:1px solid var(--theme-border, var(--theme-line))!important;
  color:var(--theme-muted)!important;
}
.footer-legal p{
  margin:0;
  color:inherit!important;
  font-size:9px;
  line-height:1.65;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.footer-legal strong{color:var(--theme-text);font-weight:650}
.footer-note{text-align:right;white-space:nowrap}

@media(max-width:850px){
  .professional-footer{
    width:calc(100% - 36px)!important;
    padding:58px 0 24px!important;
  }
  .footer-main{grid-template-columns:1fr;align-items:start;gap:32px}
  .footer-links{justify-content:flex-start}
  .footer-legal{grid-template-columns:1fr;gap:12px;margin-top:46px}
  .footer-note{text-align:left;white-space:normal}
}
@media(max-width:480px){
  .professional-footer{width:calc(100% - 28px)!important}
  .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px}
  .footer-links a:last-child{grid-column:1/-1}
  .footer-legal p{font-size:8px;letter-spacing:.06em}
}