:root{
  --accent:#008fd5; --accent-rgb:0,143,213;
  --bg:#05070b; --bg-soft:#0a0d12; --panel:#0e1217; --panel-2:#11161d;
  --text:#f3f5f8; --muted:#96a0aa; --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.18);
  --shadow:0 24px 70px rgba(0,0,0,.34); --radius:22px; --content:1480px; --mobile-header:rgba(5,7,11,.92);
}
html[data-theme="light"]{
  --bg:#f4f6f8; --bg-soft:#ffffff; --panel:#ffffff; --panel-2:#edf1f4;
  --text:#10161d; --muted:#68727c; --line:rgba(7,12,18,.10); --line-strong:rgba(7,12,18,.18);
  --shadow:0 24px 60px rgba(20,30,40,.12); --mobile-header:rgba(244,246,248,.96);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Roboto",Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none} button{font:inherit} img,video{max-width:100%;display:block} ::selection{background:rgba(var(--accent-rgb),.35);color:var(--text)}
.site-shell{min-height:100vh;background:var(--bg);transition:background .45s ease,color .45s ease}
.site-header{height:88px;position:absolute;z-index:40;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,3.2vw,64px);pointer-events:none}
.site-header>*{pointer-events:auto}
.brand-cluster{display:flex;align-items:flex-start;gap:12px}
.theme-icon{width:31px;height:31px;border:0;background:transparent;color:var(--text);font-size:25px;display:grid;place-items:center;padding:0;cursor:pointer;opacity:.88;transition:transform .3s ease,color .3s ease;margin-top:4px}
.theme-icon:hover{transform:rotate(18deg);color:var(--accent)}
.brand{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand img{width:145px;height:auto}
.brand span{font-size:12px;font-style:italic;font-weight:700;margin:7px 0 0 8px;color:var(--text);opacity:.95;text-transform:none}
.main-nav{display:flex;align-items:center;gap:43px;font-size:15px;font-weight:500;letter-spacing:0}.main-nav a{position:relative;color:var(--text);opacity:.78;transition:opacity .25s ease,color .25s ease}.main-nav a:hover{opacity:1;color:var(--accent)}
.menu-toggle{display:none;background:none;border:0;color:var(--text);width:42px;height:42px;position:relative}.menu-toggle span{position:absolute;width:24px;height:1px;background:currentColor;left:9px;top:17px;transition:.3s}.menu-toggle span+span{top:25px}
.menu-toggle.open span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle.open span:last-child{transform:translateY(-4px) rotate(-45deg)}

.hero{min-height:100svh;position:relative;display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);overflow:hidden;border-bottom:1px solid var(--line);background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 52%, rgba(0,0,0,.18) 100%)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.02) 0, transparent 34%, transparent 64%, rgba(255,255,255,.02) 100%);pointer-events:none}
.hero-photo-wrap{grid-column:1;min-height:100svh;padding:79px 0 118px 33px;display:flex;align-items:flex-start;position:relative;z-index:1}
.hero-photo-shape{width:min(100%,728px);height:min(74.6vh,688px);min-height:500px;position:relative;overflow:hidden;clip-path:polygon(15.5% 0,100% 13.5%,79.5% 100%,0 86.5%);background:#050608}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center center;filter:grayscale(1) contrast(1.02);opacity:.99}
html[data-theme="light"] .hero-photo{filter:grayscale(1) contrast(1.04)}
.hero-copy{grid-column:2;align-self:center;max-width:780px;padding:0 100px 0 72px;z-index:2;position:relative;margin-top:66px}
.hero-intro{font-size:clamp(23px,1.62vw,25px);line-height:1.72;font-weight:300;margin:0;color:var(--text);letter-spacing:0}.hero-intro strong{color:var(--accent);font-weight:700}
.hero-contact{position:absolute;left:42px;bottom:20px;z-index:5;display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--muted);line-height:1.4}.hero-contact a:hover{color:var(--accent)}.hero-contact span a{text-decoration:underline;text-underline-offset:3px;color:var(--text);opacity:.84}
.social-rail{position:absolute;right:27px;top:57%;transform:translateY(-50%);z-index:8;display:flex;align-items:center;flex-direction:column;gap:18px;font-size:13px}.follow-label{writing-mode:vertical-rl;font-size:12px;color:var(--muted);letter-spacing:.02em}.rail-line{height:50px;width:1px;background:var(--line-strong);margin:4px 0}.social{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:15px;font-weight:700;color:var(--text);transition:.25s}.social.active:hover{color:var(--accent);transform:translateY(-2px)}.social.disabled{opacity:.46;cursor:default}.social.behance{font-size:13px}.social.youtube{font-size:11px}
.hero-typed{position:absolute;z-index:4;bottom:24px;left:333px;right:90px;height:128px;display:flex;align-items:flex-end;overflow:hidden;pointer-events:none}
.hero-typed-line{font-size:clamp(64px,5.55vw,95px);line-height:1;font-weight:700;letter-spacing:-.02em;white-space:nowrap;color:var(--text);min-height:1em;display:flex;align-items:flex-end}.typed-highlight{color:var(--accent)}.typed-caret{display:inline-block;width:2px;height:.88em;background:var(--accent);margin-left:6px;animation:blink 1s step-end infinite;align-self:flex-end;margin-bottom:.06em}.typed-space{white-space:pre}
@keyframes blink{50%{opacity:0}}

.section-pad{max-width:var(--content);margin:0 auto;padding:clamp(92px,10vw,150px) clamp(22px,4vw,70px)}
.section-head{display:grid;grid-template-columns:1.08fr .82fr;gap:72px;align-items:end;margin-bottom:64px}.eyebrow{margin:0 0 16px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.section-head h2,.service-intro h2,.about-copy h2,.cta-card h2{margin:0;font-size:clamp(44px,4.8vw,78px);line-height:1.03;letter-spacing:0;font-weight:500}.section-head h2 span,.service-intro h2 span,.about-copy h2 span,.cta-card h2 span{color:var(--accent)}.section-copy,.service-intro>p:last-child{font-size:17px;line-height:1.72;color:var(--muted);margin:0;max-width:620px}

.work-section{position:relative}.work-section:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 55% 28%,rgba(var(--accent-rgb),.06),transparent 38%);pointer-events:none}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:54px 28px;position:relative;z-index:1}.project-card{cursor:pointer;outline:none}.project-media{position:relative;aspect-ratio:16/9;border-radius:18px;background:#0a0c0f;overflow:hidden;border:1px solid var(--line);box-shadow:0 16px 45px rgba(0,0,0,.16)}.project-media video{width:100%;height:100%;object-fit:cover;background:#050608}.project-media:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(3,6,9,.28),transparent 40%);pointer-events:none}.trace-border{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.trace-border rect{fill:none;stroke:var(--accent);stroke-width:.55;vector-effect:non-scaling-stroke;opacity:0;stroke-dasharray:.12 .88;stroke-linecap:round}.project-card:hover .trace-border rect,.project-card:focus .trace-border rect{opacity:1;animation:trace 1.6s linear infinite}.project-card:hover .project-media{border-color:rgba(var(--accent-rgb),.4)}@keyframes trace{to{stroke-dashoffset:-1}}
.premium-badge{position:absolute;right:14px;top:14px;z-index:4;padding:7px 10px;border-radius:999px;background:rgba(5,8,11,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);color:#fff;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.media-hint{position:absolute;right:18px;bottom:16px;z-index:4;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;background:rgba(6,9,12,.72);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px);padding:9px 12px;border-radius:999px;color:white;transform:translateY(8px);opacity:0;transition:.3s}.project-card:hover .media-hint,.project-card:focus .media-hint{transform:none;opacity:1}
.project-info{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding:17px 4px 0}.project-info h3{font-size:22px;margin:0 0 7px;letter-spacing:0;font-weight:500}.project-info p{margin:0;color:var(--muted);font-size:13px;letter-spacing:0}.project-tag{flex:0 0 auto;border-radius:999px;padding:7px 10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--line-strong);color:var(--muted)}.project-tag.live{color:#77e4b2;border-color:rgba(119,228,178,.28);background:rgba(119,228,178,.06)}.project-tag.concept{color:#a6dfff;border-color:rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.06)}

.services-section{display:grid;grid-template-columns:.82fr 1.18fr;gap:90px}.service-intro{position:sticky;top:90px;align-self:start}.service-intro p:last-child{margin-top:32px}.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.service-card{padding:38px 30px 44px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:274px}.service-icon{width:44px;height:44px;color:var(--accent);display:grid;place-items:center}.service-icon svg{width:30px;height:30px}.service-card h3{font-size:24px;margin:22px 0 14px;letter-spacing:0;font-weight:500}.service-card p{font-size:14px;line-height:1.68;color:var(--muted);margin:0}

.creative-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.creative-card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.creative-card img{width:100%;height:auto;display:block}.creative-card figcaption{padding:18px 18px 20px;background:linear-gradient(180deg,rgba(11,14,18,.5),rgba(11,14,18,.9))}.creative-card strong{display:block;font-size:16px;font-weight:500;letter-spacing:0;margin-bottom:4px}.creative-card span{font-size:14px;color:var(--muted)}

.experience-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(var(--accent-rgb),.04),transparent 34%)}.experience-inner{display:grid;grid-template-columns:380px 1fr;align-items:center;gap:40px}.stat strong{display:block;font-size:clamp(88px,9vw,146px);line-height:.9;color:var(--accent);font-weight:700}.stat span{display:block;color:var(--muted);font-size:18px;line-height:1.55;margin-top:30px}
.logo-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:20px 24px;align-items:center;margin-top:26px}.logo-item{display:flex;align-items:center;justify-content:center;min-height:48px}.logo-item img{max-width:100%;max-height:42px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) brightness(1);opacity:.88}
html[data-theme="light"] .logo-item img{filter:grayscale(1) brightness(.24);opacity:.82}

.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.process-step{padding:32px 30px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01))}.process-step>span{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.16em}.process-step h3{font-size:26px;margin:22px 0 14px;letter-spacing:0;font-weight:500}.process-step p{font-size:15px;line-height:1.7;color:var(--muted);margin:0}

.about-section{padding-top:65px}.about-copy{max-width:860px}.about-copy>p:not(.eyebrow){font-size:18px;line-height:1.78;color:var(--muted);margin:0 0 20px}.about-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.about-chips span{padding:10px 16px;border-radius:999px;border:1px solid var(--line-strong);font-size:13px;color:var(--text);background:rgba(255,255,255,.02)}

.cta-card{border:1px solid var(--line);border-radius:28px;padding:58px clamp(24px,4vw,60px);background:linear-gradient(130deg,rgba(var(--accent-rgb),.08),rgba(255,255,255,.015) 42%,rgba(255,255,255,.02) 100%)}.cta-card p:not(.eyebrow){font-size:18px;line-height:1.72;color:var(--muted);margin:26px 0 0;max-width:560px}.cta-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.btn{min-height:48px;border-radius:999px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:11px;font-size:14px;font-weight:700;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease}.btn:hover{transform:translateY(-2px)}.btn-primary{background:var(--accent);color:#00131c;border:1px solid var(--accent)}.btn-primary:hover{background:#27a7e7}.btn-ghost{border:1px solid var(--line-strong);background:rgba(255,255,255,.025);color:var(--text)}.btn-ghost:hover{border-color:rgba(var(--accent-rgb),.65)}

.footer{max-width:var(--content);margin:0 auto;padding:26px clamp(22px,4vw,70px) 46px;display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;border-top:1px solid var(--line)}.footer-brand{display:flex;align-items:center;gap:12px}.footer-brand img{width:132px;height:auto}.footer-brand span{font-size:13px;font-style:italic;font-weight:700}.footer>p{margin:0;color:var(--muted);font-size:15px;text-align:center}.footer-links{display:flex;gap:18px;justify-content:flex-end;flex-wrap:wrap}.footer-links a,.footer-bottom a{color:var(--muted);transition:color .25s ease}.footer-links a:hover,.footer-bottom a:hover{color:var(--accent)}.footer-bottom{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}

.project-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}.project-modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:rgba(5,8,11,.6);backdrop-filter:blur(15px)}.modal-panel{position:relative;width:min(1100px,calc(100vw - 40px));max-height:90svh;overflow:auto;border-radius:24px;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 30px 100px rgba(0,0,0,.4)}.modal-close{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.04);color:var(--text);font-size:24px;cursor:pointer;z-index:2}.modal-media{aspect-ratio:16/8.5;overflow:hidden;border-bottom:1px solid var(--line)}.modal-media video{width:100%;height:100%;object-fit:cover;background:#000}.modal-content{padding:36px}.modal-topline{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px;color:var(--muted);font-size:13px}.modal-content h3{font-size:40px;margin:0 0 14px;letter-spacing:0;font-weight:500}.modal-lead{font-size:18px;line-height:1.72;color:var(--muted);margin:0 0 28px}.modal-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-bottom:26px}.modal-columns h4{margin:0 0 9px;font-size:14px;color:var(--accent);letter-spacing:.14em;text-transform:uppercase}.modal-columns p,.modal-note{margin:0;color:var(--muted);font-size:15px;line-height:1.7}.modal-note{padding-top:2px;margin-bottom:26px} body.modal-open{overflow:hidden}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.2s}

@media (max-width:1200px){
  .hero{grid-template-columns:minmax(0,44%) minmax(0,56%)}
  .hero-photo-wrap{padding-left:20px}
  .hero-copy{padding-right:84px;padding-left:50px}
  .hero-typed{left:290px;right:80px}
  .logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:991px){
  .site-header{padding-inline:18px;height:74px;background:transparent}
  .menu-toggle{display:block;z-index:60}
  .main-nav{position:fixed;top:0;right:0;bottom:0;width:min(82vw,320px);background:var(--mobile-header);backdrop-filter:blur(18px);flex-direction:column;align-items:flex-start;padding:86px 24px 30px;gap:22px;transform:translateX(100%);transition:transform .35s ease;box-shadow:-8px 0 26px rgba(0,0,0,.18)}
  .main-nav.open{transform:none}.main-nav a{font-size:17px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-bottom:160px}
  .hero-photo-wrap{grid-column:1;padding:92px 18px 0;min-height:auto;justify-content:center}
  .hero-photo-shape{width:min(100%,620px);height:auto;min-height:0;aspect-ratio:1/1.06;clip-path:polygon(14.5% 0,100% 13.5%,79.5% 100%,0 87%)}
  .hero-copy{grid-column:1;padding:26px 30px 0 30px;max-width:none;align-self:start;margin-top:0}
  .hero-intro{font-size:clamp(20px,3.8vw,24px);line-height:1.62}.hero-intro br{display:none}
  .hero-contact{display:none}
  .social-rail{right:10px;top:56%;gap:12px}.follow-label{display:none}.rail-line{display:none}.social{width:24px;height:24px;font-size:13px}.social.behance{font-size:12px}
  .hero-typed{left:26px;right:34px;bottom:18px;height:96px}.hero-typed-line{font-size:clamp(38px,8vw,62px);line-height:1.08;white-space:normal;flex-wrap:wrap}
  .section-head,.services-section,.experience-inner{grid-template-columns:1fr;gap:28px}
  .service-intro{position:static}.service-grid,.creative-grid,.process-grid,.project-grid{grid-template-columns:1fr}
  .logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
  .footer{grid-template-columns:1fr;justify-items:flex-start}.footer>p{text-align:left}.footer-links{justify-content:flex-start}.footer-bottom{justify-content:flex-start;gap:16px;flex-wrap:wrap}
  .modal-panel{width:min(100%,calc(100vw - 16px));max-height:94svh;border-radius:18px}.modal-content{padding:25px 22px 30px}.modal-columns{grid-template-columns:1fr;gap:22px}
}
@media (max-width:640px){
  .brand img{width:122px}.brand span{font-size:11px;margin-left:6px}
  .hero{padding-bottom:124px}.hero-photo-wrap{padding-top:82px}.hero-copy{padding:24px 22px 0}.hero-intro{font-size:clamp(18px,5vw,21px);line-height:1.6}
  .hero-typed{left:22px;right:46px;bottom:12px;height:88px}.hero-typed-line{font-size:clamp(29px,8.9vw,44px);line-height:1.06}
  .section-pad{padding:80px 18px 110px}.section-head h2,.service-intro h2,.about-copy h2,.cta-card h2{font-size:clamp(34px,10.5vw,48px);line-height:1.08}
  .section-copy,.service-intro>p:last-child,.about-copy>p:not(.eyebrow),.cta-card p:not(.eyebrow){font-size:16px;line-height:1.7}
  .service-card{min-height:0;padding:28px 22px 30px}.service-card h3{font-size:22px}
  .project-info{align-items:flex-start}.project-info p{max-width:218px}
  .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}.logo-item{min-height:40px}.logo-item img{max-height:34px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.trace-border rect{animation:none!important}.btn,.creative-card img,.main-nav,.typed-caret{transition:none;animation:none}}

/* =========================================================
   FINAL POLISH — approved September revision
   ========================================================= */

/* Master typography consistency */
body, button, input, textarea, select{font-family:"Roboto",Arial,Helvetica,sans-serif}
.section-head h2,.service-intro h2,.about-copy h2,.cta-card h2,
.project-info h3,.service-card h3,.process-step h3,.modal-content h3,
.creative-card strong{letter-spacing:0}

/* HERO — master reference alignment */
.hero{min-height:100svh;height:100svh;max-height:100svh}
.hero-photo-wrap{padding:0 0 0 clamp(28px,2.35vw,45px);align-items:flex-start}
.hero-photo-shape{
  width:min(43.5vw,835px);
  height:min(80.8vh,804px);
  min-height:0;
  clip-path:polygon(25.5% 0,100% 10.5%,78.5% 100%,0 89%);
}
.hero-photo{object-position:center 49%}
.hero-copy{
  padding:0 clamp(86px,7.4vw,142px) 0 clamp(64px,5.6vw,108px);
  margin-top:88px;
  max-width:none;
}
.hero-intro{font-size:clamp(21px,1.25vw,24px);line-height:1.72;letter-spacing:0;font-weight:300}
.hero-line{display:block;white-space:nowrap}
.hero-contact{font-size:13px;line-height:1.45;bottom:20px}
.hero-typed{left:clamp(330px,18.7vw,360px);right:clamp(74px,5vw,96px);bottom:15px;height:142px;overflow:visible;align-items:flex-end}
.hero-typed-line{font-size:clamp(68px,5.35vw,103px);line-height:1.05;letter-spacing:0;overflow:visible;padding:.08em 0 .12em;white-space:nowrap}
.typed-highlight{margin-left:.18em}
.typed-highlight:empty{margin-left:0}
.typed-caret{height:.78em;margin-left:7px;margin-bottom:.12em}

/* Selected Website Experiences — preserve dark treatment; improve light contrast */
html[data-theme="light"] .project-info h3{color:#111820}
html[data-theme="light"] .project-info p{color:#626d78}
html[data-theme="light"] .project-tag.live{color:#267354;border-color:rgba(38,115,84,.24);background:rgba(38,115,84,.06)}
html[data-theme="light"] .project-tag.concept{color:#176a94;border-color:rgba(0,143,213,.25);background:rgba(0,143,213,.055)}

/* Website Design & Development — light mode heading hierarchy only */
html[data-theme="light"] .service-intro h2{font-weight:600;letter-spacing:-.015em;line-height:.99}
html[data-theme="light"] .service-card h3{font-weight:600;letter-spacing:-.01em;line-height:1.18}

/* More Creative Capabilities — artwork white / info panel intentionally dark */
.creative-card{background:#0c1015}
.creative-artwork{background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.creative-artwork img{width:100%;height:auto;display:block}
.creative-card figcaption{
  background:linear-gradient(180deg,#0d1117 0%,#11161d 100%);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.055);
}
.creative-card strong{color:#fff}
.creative-card figcaption span{color:#aeb6bf}
html[data-theme="light"] .creative-card{background:#fff;border-color:rgba(15,23,32,.10);box-shadow:0 14px 38px rgba(18,30,42,.08)}
html[data-theme="light"] .creative-card figcaption{
  background:linear-gradient(180deg,#20262d 0%,#555e67 100%);
  border-top:0;
}
html[data-theme="light"] .creative-card strong{color:#fff}
html[data-theme="light"] .creative-card figcaption span{color:#d7dce1}

/* Recognised brands — clean open layout with normalised monochrome weight */
.logo-item img{filter:grayscale(1) brightness(1.08) contrast(.86);opacity:.82}
html[data-theme="light"] .logo-item img{filter:grayscale(1) brightness(.42) contrast(1.35);opacity:.88}

/* About ProPassion — balanced two-column internal composition */
.about-section{padding-top:clamp(88px,8vw,126px)}
.about-layout{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(280px,.62fr);gap:clamp(58px,7vw,118px);align-items:end;width:100%}
.about-copy{max-width:870px}
.about-copy h2{margin-bottom:20px}
.about-copy>p:not(.eyebrow){font-size:17px;line-height:1.78;color:var(--muted);margin:0 0 20px}
.about-expertise{align-self:end;padding-bottom:5px}
.expertise-label{margin:0 0 20px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.expertise-list{border-top:1px solid var(--line)}
.expertise-list span{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted);letter-spacing:.01em}
.expertise-list span:first-child{color:var(--text)}

/* CTA — centered, premium soft-depth treatment */
.cta-card{text-align:center;padding:clamp(64px,7vw,100px) clamp(24px,6vw,90px);background:
  radial-gradient(circle at 50% 38%,rgba(var(--accent-rgb),.12) 0%,rgba(var(--accent-rgb),.045) 28%,transparent 58%),
  linear-gradient(145deg,#0d1117 0%,#080b10 100%);border-color:rgba(255,255,255,.10)}
.cta-card .eyebrow,.cta-card h2,.cta-card>p{margin-left:auto;margin-right:auto}
.cta-card>p{max-width:610px}
.cta-actions{justify-content:center}
html[data-theme="light"] .cta-card{
  background:
    radial-gradient(circle at 50% 36%,rgba(var(--accent-rgb),.16) 0%,rgba(var(--accent-rgb),.07) 30%,rgba(var(--accent-rgb),.018) 64%),
    linear-gradient(145deg,#fafdff 0%,#f1f8fc 100%);
  border-color:rgba(0,143,213,.16);
  box-shadow:0 22px 60px rgba(30,79,105,.09)
}

/* Footer readability + subtle oversized wordmark signature */
.footer{position:relative;overflow:hidden;padding-bottom:clamp(132px,10vw,180px);isolation:isolate}
.footer>*:not(.footer-signature){position:relative;z-index:2}
.footer-bottom{font-size:14px}
.footer-signature{
  position:absolute;z-index:0;left:50%;bottom:clamp(-74px,-4vw,-42px);transform:translateX(-50%);
  width:100%;text-align:center;white-space:nowrap;pointer-events:none;user-select:none;
  font-size:clamp(132px,14.4vw,276px);line-height:.78;font-weight:900;letter-spacing:-.045em;
  color:transparent;background:linear-gradient(90deg,rgba(76,96,111,.10),rgba(0,143,213,.075),rgba(76,96,111,.10));
  -webkit-background-clip:text;background-clip:text;
}
html[data-theme="light"] .footer-signature{
  background:linear-gradient(90deg,rgba(109,132,148,.07),rgba(0,143,213,.055),rgba(109,132,148,.07));
  -webkit-background-clip:text;background-clip:text;
}

@media (max-width:1200px){
  .hero-photo-shape{width:min(44vw,700px);height:min(76vh,700px)}
  .hero-copy{padding-left:48px;padding-right:78px;margin-top:70px}
  .hero-intro{font-size:clamp(19px,1.55vw,22px)}
  .hero-typed{left:clamp(270px,19vw,330px);right:70px}
  .hero-typed-line{font-size:clamp(58px,5.3vw,76px)}
}

@media (max-width:991px){
  /* Mobile hero is one complete first viewport: section 2 never peeks in. */
  .hero{display:block;height:100svh;min-height:100svh;max-height:100svh;padding:0;overflow:hidden}
  .hero-photo-wrap{position:absolute;top:76px;left:0;right:0;height:auto;min-height:0;padding:0 34px 0 16px;display:block}
  .hero-photo-shape{width:100%;height:auto;aspect-ratio:1/1.08;min-height:0;clip-path:polygon(18% 0,100% 11%,80% 100%,0 89%)}
  .hero-photo{object-position:center 49%}
  .hero-copy{position:absolute;left:0;right:0;top:59svh;margin:0;padding:0 48px 0 22px;max-width:none}
  .hero-intro{font-size:clamp(17px,4.7vw,21px);line-height:1.52;letter-spacing:0}
  .hero-line{display:inline;white-space:normal}
  .hero-line:not(:last-child)::after{content:" ";}
  .hero-contact{display:none}
  .social-rail{right:8px;top:54%;gap:11px;transform:translateY(-42%)}
  .social-rail .follow-label,.social-rail .rail-line{display:none}
  .social{width:24px;height:24px;font-size:13px}.social.behance{font-size:11px}.social.youtube{font-size:10px}
  .hero-typed{left:20px;right:42px;bottom:18px;height:64px;overflow:visible;align-items:flex-end}
  .hero-typed-line{font-size:clamp(20px,5.45vw,25px);line-height:1.12;white-space:nowrap;flex-wrap:nowrap;padding:.08em 0 .16em;letter-spacing:0}
  .typed-highlight{margin-left:.17em}.typed-caret{margin-left:4px;height:.72em}

  .about-layout{grid-template-columns:1fr;gap:40px;align-items:start}
  .about-expertise{max-width:560px;padding-bottom:0}

  .footer{padding-bottom:108px}
  .footer-signature{font-size:clamp(82px,20vw,150px);bottom:-32px}
}

@media (max-width:640px){
  .hero-photo-wrap{top:74px;padding:0 38px 0 14px}
  .hero-photo-shape{aspect-ratio:1/1.08}
  .hero-copy{top:58.5svh;padding:0 44px 0 20px}
  .hero-intro{font-size:clamp(16px,4.25vw,18px);line-height:1.48}
  .hero-typed{left:20px;right:40px;bottom:17px;height:58px}
  .hero-typed-line{font-size:clamp(18px,5.2vw,22px)}
  .logo-item img{max-width:90%;max-height:31px}
  .hero-contact{font-size:13px}
  .footer-bottom{font-size:13.5px}
}

@media (max-height:720px) and (max-width:991px){
  .hero-photo-wrap{top:66px;padding-left:20px;padding-right:44px}
  .hero-photo-shape{width:88%;aspect-ratio:1/1.03}
  .hero-copy{top:57svh}
  .hero-intro{font-size:15.5px;line-height:1.43}
  .hero-typed{bottom:12px;height:50px}
  .hero-typed-line{font-size:18px}
}
.hero-typed-line{max-width:100%;}

/* Master-reference micro alignment at full desktop width */
@media (min-width:1201px){
  .hero-photo-wrap{padding-left:clamp(54px,3.6vw,69px)}
  .hero-photo-shape{width:min(46.7vw,895px);height:min(75vh,745px)}
  .hero-copy{top:119px;left:-8px}
  .hero-typed{left:clamp(390px,20.7vw,400px);bottom:32px}
  .hero-typed-line{font-size:clamp(65px,5.08vw,98px)}
  .hero-contact{bottom:59px}
  .social-rail{right:50px;top:78%}
}
@media (min-width:1201px){
  .hero-photo-shape{width:min(49.5vw,950px)}
  .hero-typed{bottom:36px}
  .hero-typed-line{font-size:clamp(65px,5.15vw,99.5px)}
}
/* Light-mode logo normalization: darken pale grey/white assets without boxes or colour. */
html[data-theme="light"] .logo-item img{filter:grayscale(1) brightness(.22) contrast(.9);opacity:1}
html[data-theme="light"] .logo-row-lower .logo-item:nth-child(4) img{opacity:.52}
/* Reserve creative artwork proportions to avoid image-load layout shifts. */
.creative-artwork{aspect-ratio:898/908}
.creative-artwork img{width:100%;height:100%;object-fit:contain}

/* =========================================================
   FINAL REFINEMENT PASS — preserve approved structure
   ========================================================= */

/* Layering for the subtle design-language background motion. */
.site-shell{position:relative;isolation:isolate}
.site-shell>header,.site-shell>main,.site-shell>footer{position:relative;z-index:2}
.ambient-design{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;color:#71808b}
.ambient-shape{position:absolute;width:min(38vw,650px);height:auto;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.038}
.ambient-shape *{vector-effect:non-scaling-stroke}
.ambient-curve{top:118vh;right:-8vw;animation:ambientDriftA 24s ease-in-out infinite alternate}
.ambient-wireframe{top:335vh;left:-7vw;opacity:.032;animation:ambientDriftB 28s ease-in-out infinite alternate}
.ambient-nodes{top:585vh;right:-6vw;opacity:.028;animation:ambientDriftA 30s ease-in-out infinite alternate-reverse}
.ambient-dash{stroke-dasharray:7 10}.ambient-grid{opacity:.42}.ambient-handle{opacity:.68}.ambient-node{fill:currentColor;stroke:none}.ambient-crop{stroke-width:1.2}
html[data-theme="light"] .ambient-design{color:#7e97a8}.ambient-shape{mix-blend-mode:screen}
html[data-theme="light"] .ambient-shape{mix-blend-mode:multiply;opacity:.022}
html[data-theme="light"] .ambient-wireframe{opacity:.019}
html[data-theme="light"] .ambient-nodes{opacity:.018}
@keyframes ambientDriftA{0%{transform:translate3d(0,0,0) rotate(-1deg)}100%{transform:translate3d(-18px,22px,0) rotate(1.3deg)}}
@keyframes ambientDriftB{0%{transform:translate3d(0,0,0) rotate(.8deg)}100%{transform:translate3d(22px,-18px,0) rotate(-1deg)}}

/* Global vertical rhythm: consistent but still content-aware. */
.section-pad{padding-top:clamp(90px,7.2vw,126px);padding-bottom:clamp(90px,7.2vw,126px)}
.work-section,.services-section,.creative-section,.process-section,.about-section,.cta-section{position:relative}
html[data-theme="dark"] .services-section::before,
html[data-theme="dark"] .creative-section::before,
html[data-theme="dark"] .process-section::before,
html[data-theme="dark"] .about-section::before,
html[data-theme="dark"] .cta-section::before{
  content:"";position:absolute;left:clamp(22px,4vw,70px);right:clamp(22px,4vw,70px);top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,170,185,.085) 18%,rgba(0,143,213,.055) 50%,rgba(150,170,185,.085) 82%,transparent);
  pointer-events:none
}

/* HERO — master reference refinement. */
.hero{height:100svh;min-height:100svh;max-height:100svh}
.hero-photo-wrap{padding-left:clamp(42px,3.05vw,59px);padding-bottom:0}
.hero-photo-shape{
  width:min(46.7vw,896px);
  height:min(74.8vh,744px);
  min-height:0;
  clip-path:polygon(25.2% 0,100% 10.7%,78.7% 100%,0 88.8%);
}
.hero-photo{object-position:center 55%;transform:none}
.hero-copy{padding-left:clamp(66px,5.1vw,98px);padding-right:clamp(90px,7vw,134px);margin-top:83px;max-width:none}
.hero-intro{font-size:clamp(21px,1.28vw,24.5px);line-height:1.69;font-weight:300;letter-spacing:0}
.hero-line{display:block;white-space:nowrap}
.hero-contact{font-size:13.5px;line-height:1.5;left:clamp(42px,3.05vw,59px);bottom:52px}
/* Align the LinkedIn baseline with the animated word line, as in the master JPG. */
.social-rail{top:auto;bottom:52px;right:clamp(28px,2.6vw,50px);transform:none;gap:17px}
.hero-typed{left:clamp(355px,20.6vw,396px);right:clamp(78px,5vw,96px);bottom:42px;height:118px;overflow:visible;align-items:flex-end}
.hero-typed-line{font-size:clamp(64px,5.02vw,96px);line-height:1.08;font-weight:700;letter-spacing:0;white-space:nowrap;overflow:visible;padding:.08em 0 .11em;max-width:100%}
#typedPrefix{white-space:pre}.typed-highlight{margin-left:0}.typed-caret{height:.77em;margin-left:7px;margin-bottom:.12em}

/* Showcase hover path: a clearer, elegant draw around the rounded card. */
.trace-border rect{stroke-width:1.15;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;filter:drop-shadow(0 0 3px rgba(0,143,213,.16));transition:opacity .18s ease}
.project-card:hover .trace-border rect,.project-card:focus-visible .trace-border rect{opacity:.95;animation:outlineDraw 1.25s cubic-bezier(.24,.76,.25,1) forwards}
@keyframes outlineDraw{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}

/* More Creative — reference placement: white artwork area, dark information panel. */
.creative-grid{gap:22px;margin-left:0;margin-right:0}
.creative-card{margin:0;background:#0c1015}
.creative-artwork{background:#fff}
.creative-card figcaption{background:linear-gradient(180deg,#0c1015 0%,#11161c 100%);color:#fff}
.creative-card strong{color:#fff}.creative-card figcaption span{color:#aeb7c0}
html[data-theme="light"] .creative-card figcaption{background:linear-gradient(180deg,#1d232a 0%,#555e67 100%);color:#fff}
html[data-theme="light"] .creative-card figcaption span{color:#d9dee3}

/* Recognised brands: upper row untouched; lower row is reordered in markup only. */
.logo-grid{row-gap:22px}
.logo-item img{filter:grayscale(1) brightness(1.08) contrast(.86);opacity:.84}
html[data-theme="light"] .logo-item img{filter:grayscale(1) brightness(.28) contrast(1.1);opacity:.9}
html[data-theme="light"] .logo-row-lower .logo-item:nth-child(4) img{opacity:.62}

/* About ProPassion — use full width with a quiet, secondary expertise column. */
.about-section{padding-top:clamp(90px,7.2vw,126px)}
.about-layout{grid-template-columns:minmax(0,1.42fr) minmax(280px,.58fr);gap:clamp(60px,7vw,112px);align-items:end;width:100%}
.about-copy{max-width:900px}.about-expertise{justify-self:stretch;align-self:end;max-width:430px;width:100%;padding-bottom:4px}
.expertise-list span{padding:13px 0}

/* CTA — centred and deliberately deep in BOTH themes. */
.cta-card{
  text-align:center;
  padding:clamp(68px,7vw,102px) clamp(28px,6vw,92px);
  background:radial-gradient(circle at 50% 35%,rgba(0,143,213,.105) 0%,rgba(0,143,213,.035) 29%,transparent 58%),linear-gradient(145deg,#0b0f14 0%,#06080c 100%);
  border-color:rgba(255,255,255,.095);
  box-shadow:0 24px 70px rgba(0,0,0,.22)
}
.cta-card .eyebrow,.cta-card h2,.cta-card>p{margin-left:auto;margin-right:auto}.cta-card h2{color:#f5f7fa}.cta-card>p{color:#aeb6bf;max-width:610px}.cta-actions{justify-content:center}
html[data-theme="light"] .cta-card{
  background:radial-gradient(circle at 50% 35%,rgba(0,143,213,.13) 0%,rgba(0,143,213,.045) 29%,transparent 58%),linear-gradient(145deg,#11161c 0%,#080b10 100%);
  border-color:rgba(0,143,213,.16);box-shadow:0 24px 62px rgba(27,47,61,.14)
}
html[data-theme="light"] .cta-card h2{color:#f7f9fb}
html[data-theme="light"] .cta-card>p{color:#b8c0c7}
html[data-theme="light"] .cta-card .btn-ghost{color:#f1f4f6;border-color:rgba(255,255,255,.19);background:rgba(255,255,255,.035)}

/* Small contact/copyright readability. */
.hero-contact,.footer-bottom{font-size:13.5px}

/* Footer — stack the normal logo lower, keep existing identity, enlarge only background text. */
.footer{
  position:relative;overflow:hidden;isolation:isolate;
  grid-template-columns:1fr auto;
  grid-template-areas:"tag links" "bottom bottom" "brand brand";
  row-gap:18px;column-gap:28px;
  padding-top:34px;padding-bottom:clamp(154px,11vw,200px)
}
.footer>*:not(.footer-signature){position:relative;z-index:2}
.footer-brand{grid-area:brand;margin-top:12px;display:flex;align-items:center;gap:12px;justify-self:start}
.footer>p{grid-area:tag;text-align:left}.footer-links{grid-area:links}.footer-bottom{grid-area:bottom;grid-column:auto;justify-content:space-between;width:100%;font-size:14px}
.footer-signature{
  left:clamp(22px,4vw,70px);right:clamp(22px,4vw,70px);width:auto;transform:none;text-align:left;
  bottom:clamp(-77px,-4.1vw,-48px);
  font-size:clamp(150px,15.9vw,305px);line-height:.76;letter-spacing:-.04em;
  background:linear-gradient(90deg,rgba(81,101,116,.078),rgba(0,143,213,.055),rgba(81,101,116,.07));
  -webkit-background-clip:text;background-clip:text
}
html[data-theme="light"] .footer-signature{
  background:linear-gradient(90deg,rgba(124,145,158,.055),rgba(0,143,213,.042),rgba(124,145,158,.05));
  -webkit-background-clip:text;background-clip:text
}

/* Responsive refinements */
@media (max-width:1200px) and (min-width:992px){
  .hero-photo-wrap{padding-left:24px}.hero-photo-shape{width:min(47vw,700px);height:min(75vh,690px)}
  .hero-copy{padding-left:46px;padding-right:74px;margin-top:72px}.hero-intro{font-size:clamp(18px,1.55vw,21px)}
  .hero-typed{left:clamp(270px,20vw,330px);right:68px;bottom:34px}.hero-typed-line{font-size:clamp(54px,5.05vw,72px)}
  .social-rail{right:26px;bottom:42px}.hero-contact{left:28px;bottom:44px}
}

@media (max-width:991px){
  /* Initial mobile viewport is exclusively the hero. */
  .hero{height:100svh;min-height:100svh;max-height:100svh;display:block;overflow:hidden;padding:0}
  .hero-photo-wrap{position:absolute;top:74px;left:0;right:0;height:auto;min-height:0;padding:0 40px 0 14px;display:block}
  .hero-photo-shape{width:100%;height:auto;aspect-ratio:1/1.12;min-height:0;clip-path:polygon(18% 0,100% 11%,80% 100%,0 89%)}
  .hero-photo{object-position:center 56%}
  .hero-copy{position:absolute;left:0;right:0;top:59.5svh;margin:0;padding:0 48px 0 20px;max-width:none}
  .hero-intro{font-size:clamp(16.5px,4.45vw,20px);line-height:1.5;letter-spacing:0}.hero-line{display:inline;white-space:normal}.hero-line:not(:last-child)::after{content:" ";}
  .hero-contact{display:none}
  .social-rail{top:50%;bottom:auto;right:7px;transform:translateY(-20%);gap:10px}.social-rail .follow-label,.social-rail .rail-line{display:none}
  .social{width:23px;height:23px;font-size:12px}.social.behance{font-size:10px}.social.youtube{font-size:9px}
  .hero-typed{left:20px;right:38px;bottom:18px;height:68px;overflow:visible;align-items:flex-end}
  .hero-typed-line{font-size:clamp(20px,5.4vw,25px);line-height:1.12;white-space:nowrap;flex-wrap:nowrap;padding:.12em 0 .18em;letter-spacing:0}
  .typed-caret{height:.72em;margin-left:4px}

  .ambient-shape{width:min(72vw,500px);opacity:.022}.ambient-wireframe,.ambient-nodes{opacity:.018}
  html[data-theme="light"] .ambient-shape{opacity:.014}
  .about-layout{grid-template-columns:1fr;gap:38px}.about-expertise{max-width:560px}
  .footer{grid-template-columns:1fr;grid-template-areas:"tag" "links" "bottom" "brand";padding-bottom:118px;row-gap:15px}
  .footer-links{justify-content:flex-start}.footer-bottom{justify-content:flex-start;gap:16px;flex-wrap:wrap}.footer-brand{margin-top:6px}
  .footer-signature{left:18px;right:18px;font-size:clamp(90px,23vw,165px);bottom:-35px}
}

@media (max-width:640px){
  .section-pad{padding-top:78px;padding-bottom:94px}
  .hero-photo-wrap{top:72px;padding:0 39px 0 13px}.hero-photo-shape{aspect-ratio:1/1.12}
  .hero-copy{top:59svh;padding:0 42px 0 19px}.hero-intro{font-size:clamp(15.5px,4.15vw,17.5px);line-height:1.48}
  .hero-typed{left:19px;right:37px;bottom:15px;height:60px}.hero-typed-line{font-size:clamp(18px,5.08vw,22px)}
  .logo-item img{max-width:81%;max-height:29px} /* ~10% smaller on mobile */
  .creative-grid{gap:18px}
  .footer-bottom{font-size:13.5px}.footer-signature{font-size:clamp(86px,22.5vw,130px)}
}

@media (max-height:720px) and (max-width:991px){
  .hero-photo-wrap{top:64px;padding-left:18px;padding-right:44px}.hero-photo-shape{width:90%;aspect-ratio:1/1.08}
  .hero-copy{top:57.5svh}.hero-intro{font-size:15px;line-height:1.42}.hero-typed{bottom:10px;height:52px}.hero-typed-line{font-size:17.5px}
}

@media (prefers-reduced-motion:reduce){
  .ambient-shape{animation:none!important}
  .trace-border rect{animation:none!important;stroke-dashoffset:0!important}
}
/* Keep the navigation over the hero; ambient-layer z-index must not change its positioning. */
.site-shell>header{position:absolute;z-index:40}
@media (min-width:1201px){.social-rail{bottom:65px}}
/* Balance one unusually pale light-mode crest without altering layout or colour. */
html[data-theme="light"] .logo-row-upper .logo-item:nth-child(5) img{filter:grayscale(1) brightness(.16) contrast(1.18);opacity:.82}


/* =========================================================
   FINAL CORRECTION ROUND — exact requested refinements only
   ========================================================= */

/* 1–2. Desktop hero optical balance: shift the approved image box slightly
   right and open the bottom-right edge just enough to reveal more of the hand. */
@media (min-width:992px){
  .hero-photo-wrap{transform:translateX(clamp(10px,.78vw,15px))}
  .hero-photo-shape{
    width:min(47.45vw,912px);
    height:min(75.55vh,754px);
    clip-path:polygon(25.2% 0,100% 10.7%,80.7% 100%,0 88.8%);
  }
  .hero-photo{object-position:center 56.5%}
}
@media (min-width:992px) and (max-width:1200px){
  .hero-photo-shape{width:min(47.6vw,714px);height:min(75.6vh,700px)}
}

/* 3. Light-mode More Creative cards: only a whisper of separation. */
html[data-theme="light"] .creative-card{
  border-color:rgba(76,88,100,.145);
  box-shadow:0 0 0 1px rgba(76,88,100,.025),0 10px 28px rgba(18,30,42,.035);
}

/* 4. Recognised brands: preserve the approved upper row exactly; the lower
   row is an independent, equal-slot row with its own optical inset. */
.logo-grid{display:block;margin-top:26px}
.logo-row{display:grid;align-items:center}
.logo-row-upper{grid-template-columns:repeat(8,minmax(0,1fr));gap:20px 24px}
.logo-row-lower{
  grid-template-columns:repeat(8,minmax(0,1fr));
  column-gap:0;
  row-gap:20px;
  margin-top:22px;
  padding-inline:clamp(10px,1.2vw,20px);
}
.logo-row-lower .logo-item{min-width:0;padding-inline:clamp(4px,.42vw,8px)}
html[data-theme="light"] .logo-row-lower .logo-item:nth-child(4) img{opacity:.62}

/* 5. Balanced side glow: slightly stronger at both edges, clean in the centre. */
.experience-band{
  background-color:var(--bg);
  background-image:
    radial-gradient(ellipse 42% 115% at -7% 50%,rgba(var(--accent-rgb),.115) 0%,rgba(var(--accent-rgb),.043) 34%,transparent 69%),
    radial-gradient(ellipse 42% 115% at 107% 50%,rgba(var(--accent-rgb),.115) 0%,rgba(var(--accent-rgb),.043) 34%,transparent 69%);
}
html[data-theme="light"] .experience-band{
  background-image:
    radial-gradient(ellipse 42% 115% at -7% 50%,rgba(var(--accent-rgb),.060) 0%,rgba(var(--accent-rgb),.024) 34%,transparent 69%),
    radial-gradient(ellipse 42% 115% at 107% 50%,rgba(var(--accent-rgb),.060) 0%,rgba(var(--accent-rgb),.024) 34%,transparent 69%);
}

/* 6–7. Keep the approved CTA composition; centre only the support line and
   make the existing blue glow a little richer without brightening the edges. */
.cta-card>p{text-align:center}
.cta-card{
  background:
    radial-gradient(circle at 50% 35%,rgba(0,143,213,.175) 0%,rgba(0,143,213,.070) 30%,rgba(0,143,213,.022) 54%,transparent 69%),
    linear-gradient(145deg,#0b0f14 0%,#06080c 100%);
}
html[data-theme="light"] .cta-card{
  background:
    radial-gradient(circle at 50% 35%,rgba(0,143,213,.19) 0%,rgba(0,143,213,.075) 30%,rgba(0,143,213,.024) 54%,transparent 69%),
    linear-gradient(145deg,#11161c 0%,#080b10 100%);
}

/* 8–11. Footer: stacked normal wordmark attribution and one consistent right
   alignment for Contact, divider, and Developed by me. */
.footer-brand{flex-direction:column;align-items:flex-start;gap:7px}
.footer-brand span{margin:0 0 0 2px;line-height:1}
.footer-links{justify-self:end}
.footer-bottom{grid-column:1 / -1;justify-self:stretch;width:100%}
.footer-bottom>a{margin-left:auto;text-align:right}

/* 12–14. Desktop signature is fitted precisely by JS between the normal logo
   left edge and the Contact right edge. Mobile rules below remain untouched. */
@media (min-width:992px){
  .footer-signature{right:auto;text-align:left;white-space:nowrap;overflow:visible}
}

/* Preserve the site's existing responsive logo behaviour after splitting the
   two desktop rows into independent wrappers. */
@media (max-width:1200px){
  .logo-row-upper,.logo-row-lower{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px;padding-inline:0}
  .logo-row-lower{margin-top:20px}
}
@media (max-width:991px){
  .logo-row-upper,.logo-row-lower{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
}
@media (max-width:640px){
  .logo-row-upper,.logo-row-lower{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
}


/* =========================================================
   FINAL REFINEMENT — latest consolidated correction list
   Only targeted overrides; approved sections remain intact.
   ========================================================= */

/* 1–2. Desktop hero: use the requested two-anchor geometry.
   JS sets the photo box left edge to the ProPassion wordmark left edge,
   and its right edge to the Hello-copy start. Mobile stays untouched. */
@media (min-width:1201px){
  .hero-photo-wrap{
    position:absolute;
    inset:0;
    width:100%;
    min-height:100%;
    padding:0;
    display:block;
    transform:none;
    pointer-events:none;
  }
  .hero-photo-shape{
    position:absolute;
    top:0;
    left:var(--hero-photo-anchor-left, clamp(76px,5.2vw,100px));
    width:var(--hero-photo-anchor-width, min(45vw,860px));
    height:min(77.5vh, calc(var(--hero-photo-anchor-width, 860px) * .99));
    min-height:0;
    clip-path:polygon(25.2% 0,100% 10.7%,80.3% 100%,0 88.8%);
  }
  .hero-photo{object-position:center 61%}
}

/* 3. Light-mode creative cards: mirror the refined outline language of the
   website/video cards without changing the approved card layout/treatment. */
html[data-theme="light"] .creative-card{
  border:1px solid rgba(7,12,18,.105);
  box-shadow:0 10px 26px rgba(18,30,42,.03);
}

/* 4. Recognised brands: keep upper row exactly as approved; lower row remains
   its own optically-centred equal-slot system. */
.logo-row-lower{
  grid-template-columns:repeat(8,minmax(0,1fr));
  column-gap:0;
  padding-inline:0;
  justify-items:stretch;
}
.logo-row-lower .logo-item{
  width:100%;
  padding-inline:clamp(5px,.48vw,9px);
  display:flex;
  justify-content:center;
  align-items:center;
}
.logo-row-lower .logo-item img{margin-inline:auto}

/* 5. Continuous hover border loop — ProPassion blue family only. */
.trace-border rect{
  stroke:#008fd5;
  stroke-width:1.12;
  stroke-dasharray:.16 .84;
  stroke-dashoffset:0;
  opacity:0;
  filter:drop-shadow(0 0 2.5px rgba(0,143,213,.24));
  transition:opacity .18s ease;
}
.project-card:hover .trace-border rect,
.project-card:focus-visible .trace-border rect{
  opacity:.98;
  animation:propassionBorderLoop 1.45s linear infinite;
}
@keyframes propassionBorderLoop{to{stroke-dashoffset:-1}}

/* 6. Supporting CTA sentence — explicitly centre only this line. */
.cta-card>p{
  width:100%;
  max-width:610px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* 7. Footer upper content — follow the requested AFTER arrangement.
   The oversized ProPassion signature rules are intentionally NOT changed. */
@media (min-width:992px){
  .footer{
    grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
    grid-template-areas:
      "brand tag"
      "links bottom";
    column-gap:clamp(72px,9vw,150px);
    row-gap:16px;
    align-items:start;
    padding-top:34px;
  }
  .footer-brand{
    grid-area:brand;
    justify-self:start;
    align-self:start;
    margin:0;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
  }
  .footer-links{
    grid-area:links;
    justify-self:start;
    justify-content:flex-start;
    align-self:start;
    gap:22px;
    margin-top:4px;
  }
  .footer>p{
    grid-area:tag;
    justify-self:end;
    align-self:start;
    text-align:right;
    margin:4px 0 0;
  }
  .footer-bottom{
    grid-area:bottom;
    grid-column:auto;
    width:100%;
    padding-top:4px;
    border-top:0;
    justify-content:space-between;
    align-items:center;
    gap:26px;
  }
  .footer-bottom>a{margin-left:auto;text-align:right}
}

/* 9–14. Continuous global blue ambient movement, kept behind every section.
   Only #008fd5-family tones are used; no pink/purple/magenta. */
.site-shell::before{
  content:"";
  position:fixed;
  z-index:0;
  pointer-events:none;
  inset:-24vh -18vw;
  background:
    radial-gradient(circle at 16% 22%,rgba(0,143,213,.16) 0%,rgba(0,143,213,.075) 22%,rgba(0,143,213,.018) 39%,transparent 57%),
    radial-gradient(circle at 82% 30%,rgba(0,143,213,.115) 0%,rgba(0,143,213,.050) 23%,rgba(0,143,213,.014) 41%,transparent 58%),
    radial-gradient(circle at 54% 78%,rgba(0,143,213,.095) 0%,rgba(0,143,213,.036) 25%,transparent 54%);
  filter:blur(44px);
  transform:translate3d(-2.5%,-1.5%,0) scale(1.02);
  opacity:.72;
  will-change:transform,opacity;
  animation:propassionAmbientBlue 17s ease-in-out infinite alternate;
}
html[data-theme="light"] .site-shell::before{
  background:
    radial-gradient(circle at 16% 22%,rgba(0,143,213,.085) 0%,rgba(0,143,213,.036) 23%,rgba(0,143,213,.010) 40%,transparent 58%),
    radial-gradient(circle at 82% 30%,rgba(0,143,213,.067) 0%,rgba(0,143,213,.027) 24%,rgba(0,143,213,.008) 42%,transparent 59%),
    radial-gradient(circle at 54% 78%,rgba(0,143,213,.052) 0%,rgba(0,143,213,.020) 26%,transparent 55%);
  opacity:.58;
  filter:blur(50px);
}
@keyframes propassionAmbientBlue{
  0%{transform:translate3d(-3.2%,-2.0%,0) scale(1.01);opacity:.62}
  32%{transform:translate3d(2.5%,1.2%,0) scale(1.075);opacity:.76}
  66%{transform:translate3d(-.5%,4.0%,0) scale(1.035);opacity:.69}
  100%{transform:translate3d(4.0%,-1.0%,0) scale(1.09);opacity:.79}
}

/* Keep all foreground content above the global moving background. */
.site-shell>header,.site-shell>main,.site-shell>footer{position:relative;z-index:2}

/* No layout or motion surprises for users who request reduced motion. */
@media (prefers-reduced-motion:reduce){
  .site-shell::before{animation:none!important;transform:none!important}
  .project-card:hover .trace-border rect,
  .project-card:focus-visible .trace-border rect{animation:none!important;stroke-dashoffset:0!important}
}
/* Header must remain overlayed on the hero; do not let the ambient-layer stacking
   correction put it back into document flow. */
.site-shell>header{position:absolute;z-index:40}
.site-shell>main,.site-shell>footer{position:relative;z-index:2}

/* =========================================================
   LATEST REVISION ROUND — targeted user corrections only
   ========================================================= */

/* Hero image file replacement already handled in HTML.
   Light mode hero right-side tone: remove the grey cast and use the same
   soft bluish family as the rest of the light theme. */
html[data-theme="light"] .hero{
  background:linear-gradient(90deg,
    rgba(244,246,248,0) 0%,
    rgba(244,246,248,0) 50%,
    rgba(0,143,213,.026) 100%);
}
html[data-theme="light"] .hero:after{
  background:linear-gradient(110deg,rgba(0,143,213,.02) 0, transparent 34%, transparent 64%, rgba(0,143,213,.018) 100%);
}

/* Match the Website Design & Development headline treatment across the other
   requested section headlines without changing colour or alignment logic. */
.work-section .section-head h2,
.creative-section .section-head h2,
.process-section .section-head h2,
.about-copy h2,
.cta-card h2,
.service-intro h2{
  font-weight:600;
  letter-spacing:-.015em;
  line-height:.99;
}

/* Recognised brands: keep only the outline divider feel and continue the same
   site background language instead of a sudden white panel in light mode. */
.experience-band{
  background-color:transparent;
  background-image:
    radial-gradient(ellipse 42% 115% at -7% 50%,rgba(var(--accent-rgb),.085) 0%,rgba(var(--accent-rgb),.03) 34%,transparent 70%),
    radial-gradient(ellipse 42% 115% at 107% 50%,rgba(var(--accent-rgb),.085) 0%,rgba(var(--accent-rgb),.03) 34%,transparent 70%);
}
html[data-theme="light"] .experience-band{
  background-color:transparent;
  background-image:
    radial-gradient(ellipse 42% 115% at -7% 50%,rgba(var(--accent-rgb),.042) 0%,rgba(var(--accent-rgb),.016) 33%,transparent 70%),
    radial-gradient(ellipse 42% 115% at 107% 50%,rgba(var(--accent-rgb),.042) 0%,rgba(var(--accent-rgb),.016) 33%,transparent 70%);
}

/* Pixel-faithful row structure from the supplied reference:
   top and bottom rows use the same 8-column geometry, so top-left aligns with
   bottom-left and top-right aligns with bottom-right. */
.logo-grid{
  display:grid;
  grid-template-columns:1fr;
  row-gap:22px;
  margin-top:26px;
}
.logo-row,
.logo-row-upper,
.logo-row-lower{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:20px 24px;
  align-items:center;
  padding-inline:0;
  margin-top:0;
}
.logo-row .logo-item,
.logo-row-upper .logo-item,
.logo-row-lower .logo-item{
  min-width:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding-inline:0;
}
/* Small optical normalisation to stay close to the supplied alignment image. */
.logo-row-upper .logo-item:nth-child(4) img{max-height:39px}
.logo-row-lower .logo-item:nth-child(1) img{max-height:41px}
.logo-row-lower .logo-item:nth-child(2) img{max-height:38px}
.logo-row-lower .logo-item:nth-child(3) img{max-height:43px}
.logo-row-lower .logo-item:nth-child(4) img{max-height:42px}
.logo-row-lower .logo-item:nth-child(5) img{max-height:41px}
.logo-row-lower .logo-item:nth-child(6) img{max-height:47px}
.logo-row-lower .logo-item:nth-child(7) img{max-height:46px}
.logo-row-lower .logo-item:nth-child(8) img{max-height:41px}
html[data-theme="light"] .logo-row-lower .logo-item:nth-child(4) img{opacity:.9}

/* Selected Website Experiences hover border: continuous travelling outline in
   the ProPassion blue family only. */
.trace-border rect{
  stroke:#008fd5;
  stroke-width:1.16;
  stroke-linecap:round;
  stroke-dasharray:.28 .72;
  stroke-dashoffset:0;
  opacity:0;
  filter:drop-shadow(0 0 2.8px rgba(0,143,213,.26));
  transition:opacity .18s ease;
}
.project-card:hover .trace-border rect,
.project-card:focus-visible .trace-border rect{
  opacity:1;
  animation:propassionBorderLoopLatest 1.18s linear infinite;
}
@keyframes propassionBorderLoopLatest{to{stroke-dashoffset:-1}}

/* More Creative Capabilities light-mode outline should echo the same refined
   frame language used on the website showcase cards. */
html[data-theme="light"] .creative-card{
  border:1px solid rgba(7,12,18,.10);
  box-shadow:0 0 0 1px rgba(7,12,18,.028),0 12px 28px rgba(18,30,42,.035);
}

/* CTA support sentence: force true horizontal centering, then soften the side
   darkness a little so the blue tint remains visible. */
.cta-card > p{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  width:min(100%, 720px);
  max-width:720px;
  text-align:center;
  text-wrap:balance;
}
.cta-card{
  background:
    radial-gradient(circle at 50% 36%,rgba(0,143,213,.195) 0%,rgba(0,143,213,.082) 31%,rgba(0,143,213,.026) 56%,transparent 72%),
    linear-gradient(145deg,#0d131a 0%,#071019 100%);
}
html[data-theme="light"] .cta-card{
  background:
    radial-gradient(circle at 50% 36%,rgba(0,143,213,.205) 0%,rgba(0,143,213,.082) 31%,rgba(0,143,213,.026) 56%,transparent 72%),
    linear-gradient(145deg,#121a22 0%,#09121a 100%);
}

/* Footer: tighten the bottom info row on desktop and shift the copyright group
   slightly right so the gap to Developed by me matches the link rhythm better. */
@media (min-width:992px){
  .footer-bottom{
    justify-content:flex-end;
    gap:22px;
  }
  .footer-bottom > span,
  .footer-bottom > a{
    flex:0 0 auto;
  }
  .footer-bottom > a{margin-left:0;text-align:right}
}

/* Light footer signature: only a very slight opacity increase. */
html[data-theme="light"] .footer-signature{
  background:linear-gradient(90deg,rgba(124,145,158,.072),rgba(0,143,213,.062),rgba(124,145,158,.068));
  -webkit-background-clip:text;
  background-clip:text;
}

/* Responsive logo rows should preserve the approved mobile behaviour. */
@media (max-width:1200px){
  .logo-row,
  .logo-row-upper,
  .logo-row-lower{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 24px}
}
@media (max-width:991px){
  .logo-row,
  .logo-row-upper,
  .logo-row-lower{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
  .cta-card > p{width:min(100%, 92%)}
}
@media (max-width:640px){
  .logo-row,
  .logo-row-upper,
  .logo-row-lower{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
  .logo-item img{max-height:31px}
  .cta-card > p{max-width:94%;width:94%}
}

/* QUICK FINAL FIX — requested latest changes only */
@media (min-width: 992px){
  .cta-card > p{
    width: auto;
    max-width: none;
    display: table;
    white-space: nowrap;
    font-size: clamp(15px,1.16vw,18px);
    text-wrap: nowrap;
  }
}

/* LATEST MICRO FIX — replace landing image appearance + CTA eyebrow alignment */
.hero-photo{
  filter:none !important;
  opacity:1 !important;
}
html[data-theme="light"] .hero-photo{
  filter:none !important;
}
.cta-card .eyebrow{
  display:block;
  width:100%;
  margin:0 auto 18px;
  text-align:center !important;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* =========================================================
   FINAL FONT REVISION — typography only, no layout/colour changes
   Base: ProPassion-Website-LATEST-Final-MicroFix.zip
   ========================================================= */

/* Bai Jamjuree everywhere by default, including navigation, buttons, labels,
   body copy, cards, modal content and footer copy. */
body,
button,
input,
textarea,
select{
  font-family:"Bai Jamjuree",Arial,Helvetica,sans-serif;
}

/* Avoid overly-light text with the new body family. */
.hero-intro{font-weight:400;}

/* DM Serif Display ONLY on the specifically requested display headlines. */
.hero-typed-line,
.work-section .section-head h2,
.service-intro h2,
.creative-section .section-head h2,
.stat strong,
.process-section .section-head h2,
.about-copy h2,
.cta-card h2{
  font-family:"DM Serif Display",Georgia,serif;
  font-weight:400;
}

/* Project and creative-card titles: Bai Jamjuree SemiBold 600. */
.project-info h3,
.creative-card strong{
  font-family:"Bai Jamjuree",Arial,Helvetica,sans-serif;
  font-weight:600;
}

/* Requested section labels: normal letter spacing, with all existing size,
   colour, case and placement left untouched. */
.work-section .eyebrow,
.service-intro .eyebrow,
.creative-section .eyebrow,
.brands .eyebrow,
.process-section .eyebrow,
.about-section .eyebrow,
.expertise-label,
.cta-card .eyebrow{
  font-family:"Bai Jamjuree",Arial,Helvetica,sans-serif;
  letter-spacing:0;
}

/* IMPORTANT: preserve the approved oversized bottom ProPassion exactly in its
   previous typeface. It inherited Roboto in the MicroFix base, so it remains
   explicitly Roboto here while every other text uses the new font system. */
.footer-signature{
  font-family:"Roboto",Arial,Helvetica,sans-serif;
  font-weight:900;
}

/* =========================================================
   FINAL DETAIL TUNE — requested alignment/readability fixes
   ========================================================= */

/* 1. Browser hero alignment only: lower the left brand cluster so the logo
   visually aligns with the Home / Works / Services / About / Contact row. */
@media (min-width:1201px){
  .brand-cluster{transform:translateY(9px)}

  /* Raise the email/copyright block so its lower edge aligns with LinkedIn. */
  .hero-contact{bottom:65px}
}

/* 2. Small copy readability: modest increases only, preserving hierarchy. */
.eyebrow{font-size:13px}
.project-info p{font-size:14px;line-height:1.45}
.project-tag{font-size:11px}
.premium-badge{font-size:10px}
.media-hint{font-size:12px}
.service-card p{font-size:15px}
.creative-card span{font-size:15px}
.process-step>span{font-size:13px}
.process-step p{font-size:15.5px}
.expertise-label{font-size:12.5px}
.expertise-list span{font-size:15px}
.modal-topline{font-size:14px}
.hero-contact,.footer-bottom{font-size:14px}
.footer>p{font-size:15.5px}

/* 3. Light theme body copy: improve readability without changing the palette
   direction or the premium light-blue background treatment. */
html[data-theme="light"]{
  --muted:#596570;
}
html[data-theme="light"] .project-info p{color:#596570}
html[data-theme="light"] .section-copy,
html[data-theme="light"] .service-intro>p:last-child,
html[data-theme="light"] .service-card p,
html[data-theme="light"] .process-step p,
html[data-theme="light"] .about-copy>p:not(.eyebrow),
html[data-theme="light"] .expertise-list span,
html[data-theme="light"] .footer>p,
html[data-theme="light"] .footer-links a,
html[data-theme="light"] .footer-bottom{
  color:#596570;
}

/* 4. The Website Design & Development display headline must match the same
   DM Serif Display weight/feel as the other main display headlines in Light. */
html[data-theme="light"] .service-intro h2{
  font-family:"DM Serif Display",Georgia,serif;
  font-weight:400 !important;
  letter-spacing:0 !important;
  line-height:.99;
}

/* 5. Desktop oversized ProPassion: keep the approved Roboto typeface, but
   remove top clipping and make it optically a touch taller while preserving
   exact left/right anchors calculated by JS. Mobile remains unchanged. */
@media (min-width:992px){
  .footer-signature{
    font-family:"Roboto",Arial,Helvetica,sans-serif;
    font-weight:900;
    line-height:.90;
    letter-spacing:-.05em;
    bottom:clamp(-92px,-5vw,-60px);
    overflow:visible;
    transform:scaleY(1.035);
    transform-origin:left bottom;
  }
}

/* Latest project/icon update: preserve the existing service icon footprint. */
.service-icon img{width:30px;height:30px;object-fit:contain;display:block}

/* Selected Website Experiences: a stronger, shorter desktop hover highlight.
   Four 5px blue streaks, a .9s clockwise loop, and quarter-cycle offsets.
   Negative delays show the moving highlight immediately on hover.
   Keep the existing SVG treatment on touch devices; use only #008fd5 here. */
#projectGrid .showcase-loop-border{display:none}
@media (hover:hover) and (pointer:fine){
  #projectGrid .trace-border{display:none}
  #projectGrid .trace-border rect{animation:none!important}
  #projectGrid .showcase-loop-border{
    display:block;
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    z-index:3;
    pointer-events:none;
    opacity:0;
  }
  #projectGrid .showcase-loop-border::after{
    content:"";
    position:absolute;
    inset:0;
    border:3px solid rgba(0,143,213,.3);
    border-radius:inherit;
    z-index:0;
  }
  #projectGrid .showcase-loop-border::before,
  #projectGrid .showcase-loop-border>span{
    position:absolute;
    z-index:1;
  }
  #projectGrid .showcase-loop-border::before{
    content:"";
    top:0;
    left:-100%;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,transparent 32%,#008fd5 42%,#008fd5 58%,transparent 68%);
  }
  #projectGrid .showcase-loop-right{
    top:-100%;
    right:0;
    width:5px;
    height:100%;
    background:linear-gradient(180deg,transparent 32%,#008fd5 42%,#008fd5 58%,transparent 68%);
  }
  #projectGrid .showcase-loop-bottom{
    bottom:0;
    right:-100%;
    width:100%;
    height:5px;
    background:linear-gradient(270deg,transparent 32%,#008fd5 42%,#008fd5 58%,transparent 68%);
  }
  #projectGrid .showcase-loop-left{
    bottom:-100%;
    left:0;
    width:5px;
    height:100%;
    background:linear-gradient(0deg,transparent 32%,#008fd5 42%,#008fd5 58%,transparent 68%);
  }
  #projectGrid .project-card:hover .showcase-loop-border,
  #projectGrid .project-card:focus-visible .showcase-loop-border{opacity:1}
  #projectGrid .project-card:hover .showcase-loop-border::before,
  #projectGrid .project-card:focus-visible .showcase-loop-border::before{
    animation:showcaseLoopTop .9s linear infinite -.225s;
  }
  #projectGrid .project-card:hover .showcase-loop-right,
  #projectGrid .project-card:focus-visible .showcase-loop-right{
    animation:showcaseLoopRight .9s linear infinite;
  }
  #projectGrid .project-card:hover .showcase-loop-bottom,
  #projectGrid .project-card:focus-visible .showcase-loop-bottom{
    animation:showcaseLoopBottom .9s linear infinite -.675s;
  }
  #projectGrid .project-card:hover .showcase-loop-left,
  #projectGrid .project-card:focus-visible .showcase-loop-left{
    animation:showcaseLoopLeft .9s linear infinite -.45s;
  }
  @keyframes showcaseLoopTop{from{left:-100%}to{left:100%}}
  @keyframes showcaseLoopRight{from{top:-100%}to{top:100%}}
  @keyframes showcaseLoopBottom{from{right:-100%}to{right:100%}}
  @keyframes showcaseLoopLeft{from{bottom:-100%}to{bottom:100%}}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  #projectGrid .showcase-loop-border::before,
  #projectGrid .showcase-loop-border>span{animation:none!important}
}

/* Recognisable platform marks in the existing social rail. */
.social.youtube svg,.social.instagram svg{display:block;width:18px;height:18px}
.footer-social-rail{display:none}
.hero-intro-mobile{display:none}

/* Clearer but restrained contrast for the three process cards in both themes. */
.process-step{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.065));
  border-color:rgba(255,255,255,.15)
}
html[data-theme="light"] .process-step{
  background:linear-gradient(180deg,rgba(11,31,49,.095),rgba(11,31,49,.07));
  border-color:rgba(7,12,18,.18)
}
.footer>p{font-family:"Bai Jamjuree",Arial,Helvetica,sans-serif;font-style:italic;font-weight:500}

/* Phone composition from the approved landing, brand, project and footer references. */
@media (max-width:640px){
  .site-header{height:70px;padding-inline:16px}
  .brand-cluster{gap:9px;transform:translateY(5px)}
  .theme-icon{font-size:19px;margin-top:1px}
  html[data-theme="dark"] .site-header .theme-icon .sun{font-size:25px;line-height:1}
  .brand img{width:112px}
  .brand span{font-size:11px;margin:7.3px 0 0 6px}
  .menu-toggle{transform:translateY(-3.5px)}
  .menu-toggle span{left:12px;width:22px}
  .main-nav{width:37.5vw;background:rgba(5,7,11,.175)}
  html[data-theme="light"] .main-nav{background:rgba(244,246,248,.1855)}
  html[data-theme="light"] .main-nav a{color:#f3f5f8;text-shadow:0 1px 4px rgba(0,0,0,.65)}

  .hero{height:100svh;min-height:100svh;max-height:100svh;background:linear-gradient(180deg,#06121b 0%,#06121b 70%,#050f18 100%)}
  html[data-theme="light"] .hero{background:linear-gradient(180deg,#eaf3f8 0%,#eaf3f8 70%,#e3ecf1 100%)}
  .hero-photo-wrap{top:0;left:0;right:0;width:100%;padding:0;transform:none}
  .hero-photo-shape{
    width:100vw;height:min(68.3svh,520px);aspect-ratio:auto;
    clip-path:polygon(0 0,100% 0,82% 100%,0 90%);
  }
  .hero-photo{object-position:center center;transform:translate(-3.2vw,-2vw) scale(1.2)}
  .hero-copy{top:calc(min(68.3svh,520px) + 25px);left:0;right:0;padding:0 20px 0 18px}
  .hero-intro{font-size:clamp(13px,3.75vw,16px);line-height:1.56;font-weight:400}
  .hero-intro-desktop{display:none}
  .hero-intro-mobile{display:block}
  .hero-intro-mobile .hero-line{display:block;white-space:nowrap}
  html[data-theme="light"] .site-header .theme-icon,
  html[data-theme="light"] .site-header .menu-toggle,
  html[data-theme="light"] .site-header .brand span{color:#f3f5f8}
  html[data-theme="light"] .site-header .menu-toggle.open{color:#f3f5f8}
  .social-rail{top:auto;bottom:36px;right:12px;transform:none;gap:6px}
  .social{width:23px;height:23px;font-size:10px}
  .social.behance{font-size:9px}
  .social.active{font-size:12px}
  .social.youtube svg,.social.instagram svg{width:12px;height:12px}
  .hero-typed{left:18px;right:45px;bottom:38px;height:auto;display:block}
  .hero-typed-line{display:block;font-size:clamp(23px,7.85vw,32px);line-height:1.02;white-space:normal;letter-spacing:-.012em;padding:0;height:2.04em}
  #typedPrefix,#typedHighlight{display:block;white-space:nowrap;height:1.02em;line-height:1.02}
  #typedHighlight{margin-left:0}
  .hero-typed .typed-caret{display:none}

  .experience-band{background-color:#06141e}
  html[data-theme="light"] .experience-band{background-color:var(--bg)}
  .experience-inner{padding:40px 16px 26px;gap:32px}
  .stat strong{font-size:64px;line-height:.9}
  .stat span{font-size:14.5px;line-height:1.5;margin-top:12px}
  .brands .eyebrow{font-size:11px;line-height:1.25;margin:0 0 24px;white-space:nowrap}
  .logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(8,44px);column-gap:20px;row-gap:16px;margin-top:0;padding-inline:40px}
  .logo-row,.logo-row-upper,.logo-row-lower{display:contents}
  .logo-row .logo-item,.logo-row-upper .logo-item,.logo-row-lower .logo-item{min-height:0;padding:0}
  .logo-item img{max-width:100%;max-height:35px}
  .logo-row-upper .logo-item:nth-child(1) img{max-width:98px;max-height:27px}
  .logo-row-upper .logo-item:nth-child(2) img{max-width:36px;max-height:44px}
  .logo-row-upper .logo-item:nth-child(3) img{max-width:40px;max-height:44px}
  .logo-row-upper .logo-item:nth-child(5) img{max-width:43px;max-height:41px}
  .logo-row-upper .logo-item:nth-child(6) img{max-width:77px;max-height:31px}
  .logo-row-upper .logo-item:nth-child(7) img{max-width:40px;max-height:41px}
  .logo-row-upper .logo-item:nth-child(8) img{max-width:81px;max-height:32px}
  .logo-row-lower .logo-item:nth-child(8) img{max-width:73px;max-height:32px}
  .logo-row-lower .logo-item:nth-child(6) img{max-width:50px;max-height:47px}
  .logo-row-lower .logo-item:nth-child(3) img{max-width:60px;max-height:35px}
  .logo-row-lower .logo-item:nth-child(1) img{max-width:66px;max-height:27px}
  .logo-row-lower .logo-item:nth-child(5) img{max-width:58px;max-height:32px}
  .logo-row-upper .logo-item:nth-child(4) img{max-width:105px;max-height:28px}
  .logo-row-lower .logo-item:nth-child(4) img{max-width:45px;max-height:43px}
  .logo-row-lower .logo-item:nth-child(7) img{max-width:56px;max-height:41px}
  .logo-row-lower .logo-item:nth-child(2) img{max-width:85px;max-height:28px}
  .logo-row-upper .logo-item:nth-child(1){grid-area:1 / 1}
  .logo-row-upper .logo-item:nth-child(2){grid-area:2 / 1}
  .logo-row-upper .logo-item:nth-child(3){grid-area:3 / 1}
  .logo-row-lower .logo-item:nth-child(5){grid-area:4 / 1}
  .logo-row-upper .logo-item:nth-child(5){grid-area:5 / 1}
  .logo-row-upper .logo-item:nth-child(6){grid-area:6 / 1}
  .logo-row-upper .logo-item:nth-child(7){grid-area:7 / 1}
  .logo-row-upper .logo-item:nth-child(8){grid-area:8 / 1}
  .logo-row-lower .logo-item:nth-child(8){grid-area:1 / 2}
  .logo-row-lower .logo-item:nth-child(6){grid-area:2 / 2}
  .logo-row-lower .logo-item:nth-child(3){grid-area:3 / 2}
  .logo-row-lower .logo-item:nth-child(1){grid-area:4 / 2}
  .logo-row-upper .logo-item:nth-child(4){grid-area:5 / 2}
  .logo-row-lower .logo-item:nth-child(4){grid-area:6 / 2}
  .logo-row-lower .logo-item:nth-child(7){grid-area:7 / 2}
  .logo-row-lower .logo-item:nth-child(2){grid-area:8 / 2}

  .project-modal{padding:18px}
  .modal-panel{width:calc(100vw - 36px);max-height:calc(100svh - 36px);border-radius:16px}
  .modal-close{top:12px;right:12px;width:37px;height:37px}
  html[data-theme="light"] .project-modal .modal-close{color:#fff;background:rgba(5,8,11,.72);border-color:rgba(255,255,255,.35)}
  .modal-content{padding:24px 20px 28px}
  .modal-topline{font-size:11.4px;letter-spacing:-.025em;gap:10px;margin-bottom:20px;flex-wrap:nowrap}
  .modal-topline .project-tag{font-size:10px;letter-spacing:.05em;padding:8px 10px}
  .modal-content h3{font-size:24px;line-height:1.14;margin-bottom:6px}
  .modal-lead{font-size:10.4px;line-height:1.55;letter-spacing:-.015em;margin-bottom:16px}
  .modal-columns{gap:10px;margin-bottom:20px}
  .modal-columns h4{font-size:11.5px;letter-spacing:0;margin-bottom:8px}
  .modal-columns p,.modal-note{font-size:10.75px;line-height:1.56;letter-spacing:-.015em}
  .modal-note{margin-bottom:15px}
  .modal-content .btn{width:100%;min-height:45px;justify-content:space-between;text-align:left;white-space:normal;line-height:1.15;font-size:12px;padding:6px 18px}
  .modal-content .btn span{flex:0 0 auto}

  .footer{background:#050e17;grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:"brand social" "tag social" "links social" "bottom bottom";column-gap:10px;row-gap:0;padding:36px 20px 59px;align-items:start;justify-items:stretch}
  html[data-theme="light"] .footer{background:var(--bg)}
  .footer>p{grid-area:tag;font-size:clamp(12px,3.9vw,14px);line-height:1.48;text-align:left;margin:38px 0 0;color:var(--text);white-space:nowrap}
  .footer-brand{grid-area:brand;align-self:start;margin-top:0;gap:0;flex-direction:column}
  .footer-brand img{width:122px}
  .footer-brand span{font-size:12px;margin:7px 0 0 6px}
  .footer-social-rail{grid-area:social;display:flex;flex-direction:column;align-items:center;justify-self:end;gap:7px;transform:translate(8px,-6px)}
  .footer-links{grid-area:links;display:flex;justify-self:stretch;width:100%;justify-content:flex-start;flex-wrap:nowrap;gap:25px;margin-top:38px;padding:0;font-size:14px}
  .footer-bottom{grid-area:bottom;grid-column:1 / -1;justify-content:space-between;flex-wrap:nowrap;gap:8px;margin-top:14px;padding-top:17px;font-size:13px}
  .footer-signature{left:18px;right:18px;bottom:-35px;font-size:clamp(86px,22.5vw,130px)}
}
@media (max-width:640px) and (max-height:620px){
  .hero-photo-shape{height:61svh}
  .hero-copy{top:calc(61svh + 20px)}
}
@media (max-width:340px){
  .hero-intro{font-size:12px}
  .footer-links{gap:15px;font-size:13px}
}

/* Homepage refinements: service icons, contact button, return-to-top and phone language control. */
.service-icon{justify-items:start}
.service-icon img{width:34.5px;height:34.5px}
.cta-actions>.btn-primary{padding-inline:19px}
.cta-actions .contact-whatsapp{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
.home-back-top{display:grid;place-items:center;width:42px;height:42px;color:var(--accent);border:1px solid currentColor;border-radius:50%;transition:background .25s ease}
.home-back-top:hover{background:rgba(var(--accent-rgb),.08)}
.contact-back-top{display:none}
.footer>.footer-back-top{position:absolute;top:28px;right:clamp(22px,4vw,70px)}
@media(min-width:641px){
  .footer>p{margin-right:66px}
}
@media(max-width:640px){
  .site-header .header-controls{position:absolute;top:14px;right:16px;width:42px;flex-direction:column-reverse;align-items:center;gap:2px;margin:0;z-index:70}
  .site-header .header-controls .language-switch{flex-shrink:0}
  .site-header .main-nav{padding-top:112px}
  .cta-actions>.btn-primary{padding-inline:17px}
  .cta-section{padding-bottom:34px}
  .contact-back-top{display:grid;width:32px;height:32px;margin:28px auto 0}
  .contact-back-top svg{width:20px;height:20px}
  .footer>.footer-back-top{display:none}
  .footer .footer-links{transform:translateY(-10px)}
}

/* The two contact entries share one choice dialog and the supplied artwork. */
.contact-trigger{font-family:inherit;cursor:pointer;max-width:100%}
.contact-combo-icon,.contact-option-icon{display:inline-block;flex:0 0 auto;background:currentColor;-webkit-mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.contact-combo-icon{width:30px;height:18px;-webkit-mask-image:url('../icons/contact-whatsapp-call.svg');mask-image:url('../icons/contact-whatsapp-call.svg')}
.contact-option-icon{width:19px;height:19px}
.contact-option-whatsapp{-webkit-mask-image:url('../icons/contact-whatsapp.svg');mask-image:url('../icons/contact-whatsapp.svg')}
.contact-option-call{-webkit-mask-image:url('../icons/contact-call.svg');mask-image:url('../icons/contact-call.svg')}
.contact-dialog{position:fixed;inset:0;z-index:180;display:flex;align-items:center;justify-content:center;padding:16px}
.contact-dialog[hidden]{display:none}
.contact-dialog-backdrop{position:absolute;inset:0;background:rgba(3,7,11,.78);backdrop-filter:blur(12px)}
.contact-dialog-panel{position:relative;width:min(470px,100%);padding:40px 34px 34px;border:1px solid rgba(0,143,213,.28);border-radius:24px;background:radial-gradient(circle at 50% 0%,rgba(0,143,213,.16),transparent 65%),linear-gradient(145deg,#101820,#080c12);box-shadow:0 24px 80px rgba(0,0,0,.48);color:#f3f5f8;text-align:center}
.contact-dialog-close{position:absolute;top:13px;right:14px;width:38px;height:38px;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(255,255,255,.045);color:#f3f5f8;font:24px/1 "Bai Jamjuree",Arial,sans-serif;cursor:pointer}
.contact-dialog-close:hover,.contact-dialog-close:focus-visible{border-color:#008fd5}
.contact-dialog-eyebrow{margin:4px 0 18px;color:#62bbeb;font:600 11px/1.4 "Bai Jamjuree",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.contact-dialog h2{margin:0;color:#f3f5f8;font:400 clamp(27px,3vw,39px)/1.1 "DM Serif Display",Georgia,serif}
.contact-dialog-copy{margin:18px auto 0;max-width:350px;color:#b8c4cf;font:400 15px/1.6 "Bai Jamjuree",Arial,sans-serif}
.contact-dialog-person{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:22px 0 25px;color:#bdc8d2;font:500 14px/1.45 "Bai Jamjuree",Arial,sans-serif}
.contact-dialog-person-name{color:#f3f5f8}
.contact-dialog-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;direction:ltr}
.contact-dialog-options .btn{width:100%;min-width:0;min-height:48px;padding:0 12px;font-family:"Bai Jamjuree",Arial,sans-serif;text-decoration:none}
.contact-dialog-options .btn-ghost{color:#f3f5f8;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.contact-dialog-options .btn-ghost:hover{border-color:#008fd5}
body.contact-open{overflow:hidden}
@media(min-width:641px){
  .contact-dialog-copy{max-width:none;white-space:nowrap}
}
@media(max-width:640px){
  .contact-dialog-panel{padding:34px 22px 25px;border-radius:20px}
  .contact-dialog h2{font-size:clamp(25px,7vw,31px)}
  .contact-dialog-eyebrow{font-size:10px}
  .contact-dialog-copy{font-size:13px}
  .contact-dialog-options{gap:9px}
  .contact-dialog-options .btn{font-size:12px}
}

/* Project navigation sits outside the scrollable panel; mobile circles straddle its border. */
.modal-media{position:relative}
.modal-fullscreen-trigger{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.modal-fullscreen-trigger:focus-visible{outline:2px solid #008fd5;outline-offset:-4px}
#modalVideo:fullscreen,#modalVideo:-webkit-full-screen{width:100vw;height:100vh;object-fit:contain;background:#000}
.modal-media.video-fallback-fullscreen{position:fixed;inset:0;z-index:5;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;border:0;background:#000}
.modal-media.video-fallback-fullscreen video{width:100%;height:100%;object-fit:contain}
.modal-media.video-fallback-fullscreen .modal-fullscreen-trigger{display:none}
.modal-fullscreen-exit{display:none;position:absolute;top:16px;right:16px;z-index:6;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(3,9,14,.8);color:#fff;font:26px/1 "Bai Jamjuree",Arial,sans-serif;cursor:pointer}
.modal-media.video-fallback-fullscreen .modal-fullscreen-exit{display:grid}
.modal-fullscreen-exit:focus-visible{outline:2px solid #008fd5;outline-offset:3px}
.modal-step{position:absolute;top:50%;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(3,9,14,.76);color:#fff;backdrop-filter:blur(8px);transform:translateY(-50%);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.modal-step[hidden]{display:none}
.modal-step-prev{left:0}
.modal-step-next{right:0}
.modal-step svg{width:18px;height:18px}
.modal-step:hover{background:rgba(3,9,14,.94);border-color:#008fd5}
.modal-step:focus-visible{outline:2px solid #008fd5;outline-offset:3px}
@media(min-width:1240px){
  .modal-step{width:44px;height:44px}
  .modal-step-prev{left:calc(50% - 604px)}
  .modal-step-next{right:calc(50% - 604px)}
}
@media(max-width:640px){.modal-step{width:36px;height:36px}.modal-step svg{width:17px;height:17px}}