@font-face{font-family:'Sora';font-weight:700;font-style:normal;src:url('/assets/fonts/sora-700.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Sora';font-weight:800;font-style:normal;src:url('/assets/fonts/sora-800.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;src:url('/assets/fonts/inter-400.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;src:url('/assets/fonts/inter-500.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;src:url('/assets/fonts/inter-600.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;src:url('/assets/fonts/plex-mono-500.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;src:url('/assets/fonts/plex-mono-600.ttf') format('truetype');font-display:swap;}

:root{
  /* --bg, --surface, --ink, --accent, --accent2, --gold are set inline
     per-page by the PHP renderer from PUBSITE_THEME_TOKENS. Everything
     below is derived from just those 6, via color-mix(), so no theme
     needs its own hardcoded set of derived shades. */
  --card: color-mix(in srgb, var(--surface) 85%, white);
  --ink-dim: color-mix(in srgb, var(--ink) 62%, var(--bg));
  --ink-faint: color-mix(in srgb, var(--ink) 42%, var(--bg));
  --paper: color-mix(in srgb, white 92%, var(--bg));
  --paper-dim: color-mix(in srgb, var(--paper) 70%, var(--ink));
  --paper-faint: color-mix(in srgb, var(--paper) 45%, var(--ink));
  --line: color-mix(in srgb, var(--ink) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 22%, transparent);
  --line-dark: color-mix(in srgb, var(--paper) 16%, transparent);
  --line-dark-strong: color-mix(in srgb, var(--paper) 28%, transparent);
  --accent-deep: color-mix(in srgb, var(--accent) 72%, black);
  --accent2-deep: color-mix(in srgb, var(--accent2) 72%, black);
  --gold-deep: color-mix(in srgb, var(--gold) 72%, black);
  --gold-glow: color-mix(in srgb, var(--gold) 34%, transparent);
  --accent2-glow: color-mix(in srgb, var(--accent2) 22%, transparent);
  --radius: 10px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:16px;line-height:1.65;letter-spacing:-0.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px;}
@media (max-width:640px){.wrap{padding-left:20px;padding-right:20px;}}

.eyebrow{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--accent);display:inline-block;flex:none;}

h1,h2,h3{font-family:'Sora',sans-serif;font-weight:700;letter-spacing:-0.02em;text-wrap:balance;margin:0;color:var(--ink);}

.btn{font-family:'Inter',sans-serif;font-weight:600;font-size:0.95rem;display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-gold{background:var(--gold);color:var(--ink);position:relative;overflow:hidden;}
.btn-gold:hover{transform:translateY(-1px);filter:brightness(1.08);}
.btn-gold::after{content:'';position:absolute;top:-50%;left:-75%;width:50%;height:200%;background:linear-gradient(to right, transparent, rgba(255,255,255,0.45), transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;}
.btn-gold:hover::after{left:125%;}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-deep);}
.hero .btn-outline{color:var(--paper);border-color:var(--line-dark-strong);}
.hero .btn-outline:hover{border-color:var(--gold);color:var(--gold);}

header{position:sticky;top:0;z-index:50;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
nav.wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand svg{width:32px;height:32px;flex:none;}
.brand-name{font-family:'Sora';font-weight:800;font-size:1.15rem;letter-spacing:-0.01em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:12px;}
.brand-name::before{content:'';width:2px;height:1.1em;background:var(--accent);display:inline-block;flex:none;}
.navlinks{display:flex;align-items:center;gap:28px;font-size:0.9rem;font-weight:500;}
.navlinks a{text-decoration:none;color:var(--ink-dim);transition:color .15s;}
.navlinks a:hover{color:var(--accent-deep);}
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{font:inherit;background:none;border:none;color:var(--ink-dim);cursor:pointer;}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px;min-width:170px;flex-direction:column;gap:2px;box-shadow:0 12px 24px rgba(0,0,0,0.08);}
.nav-dropdown:hover .nav-dropdown-menu{display:flex;}
.nav-dropdown-menu a{padding:8px 10px;border-radius:6px;font-size:0.88rem;}
.nav-dropdown-menu a:hover{background:var(--surface);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-phone{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono';font-size:0.82rem;color:var(--ink-dim);text-decoration:none;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);transition:transform .2s ease, opacity .2s ease;}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);display:flex;flex-direction:column;padding:0 20px;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease, opacity .2s ease;}
.mobile-menu.open{max-height:360px;opacity:1;padding:8px 20px 18px;}
.mobile-menu a{padding:13px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500;}
.mobile-menu a:last-child{border-bottom:none;}
@media (max-width:900px){.navlinks{display:none;}.nav-phone span{display:none;}.nav-toggle{display:flex;}}
@media (min-width:901px){.mobile-menu{display:none;}}
@media (max-width:480px){.nav-phone{display:none;}.brand-name{font-size:1.12rem;}}

@keyframes heroDrift{0%{transform:scale(1.05) translate3d(0,0,0);}100%{transform:scale(1.12) translate3d(-1.2%,-1%,0);}}
@keyframes floatY{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(-10px,-18px,0) scale(1.05);}}
.glow-orb{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;z-index:-1;animation:floatY 9s ease-in-out infinite;}
.hero{position:relative;min-height:90vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2;filter:saturate(1.05) contrast(1.03);animation:heroDrift 24s ease-in-out infinite alternate;}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg, color-mix(in srgb, black 18%, transparent) 0%, color-mix(in srgb, black 58%, transparent) 45%, color-mix(in srgb, black 96%, transparent) 92%);}
.hero .glow-orb{width:460px;height:460px;top:-140px;right:-100px;background:radial-gradient(circle, var(--gold-glow), transparent 70%);}
.hero-inner{position:relative;padding-top:150px;padding-bottom:60px;width:100%;}
.hero .eyebrow{color:var(--gold);}
.hero .eyebrow::before{background:var(--gold);}
.hero h1{color:var(--paper);font-weight:800;font-size:clamp(2rem, 5.6vw, 4.4rem);line-height:1.06;letter-spacing:-0.02em;}
.hero h1 .accent{background:linear-gradient(135deg, var(--gold) 10%, color-mix(in srgb, var(--gold) 60%, white) 55%, var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.hero-sub{max-width:40ch;color:var(--paper-dim);font-size:clamp(1.02rem,1.6vw,1.18rem);margin:22px 0 32px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}
.hero .eyebrow,.hero h1,.hero-sub,.hero-ctas{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);}
body.loaded .hero .eyebrow{opacity:1;transform:none;transition-delay:.05s;}
body.loaded .hero h1{opacity:1;transform:none;transition-delay:.18s;}
body.loaded .hero .hero-sub{opacity:1;transform:none;transition-delay:.34s;}
body.loaded .hero .hero-ctas{opacity:1;transform:none;transition-delay:.48s;}

.trust-strip{border-top:1px solid var(--line);background:var(--surface);}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);}
.trust-item{display:flex;align-items:center;gap:12px;padding:22px 20px;border-right:1px solid var(--line);font-size:0.85rem;color:var(--ink-dim);}
.trust-item:last-child{border-right:none;}
.trust-item svg{flex:none;width:20px;height:20px;color:var(--accent-deep);}
.trust-item strong{color:var(--ink);font-weight:600;display:block;font-size:0.9rem;}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr);}.trust-item{border-bottom:1px solid var(--line);border-right:none;}.trust-item:nth-child(odd){border-right:1px solid var(--line);}}
@media (max-width:520px){.trust-grid{grid-template-columns:1fr;}.trust-item{border-right:none !important;}}

section{padding:72px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:18ch;}
.section-head p{color:var(--ink-dim);max-width:36ch;margin:0;font-size:1rem;}
.reveal,.reveal-item{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in,.reveal-group.in .reveal-item{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-item,.hero .eyebrow,.hero h1,.hero-sub,.hero-ctas{opacity:1 !important;transform:none !important;transition:none !important;}.hero-img,.glow-orb{animation:none !important;}.btn-gold::after{display:none !important;}}
@media (max-width:640px){section{padding:48px 0;}.section-head{margin-bottom:32px;}}

.ledger{position:relative;background:linear-gradient(180deg, color-mix(in srgb, black 80%, transparent), color-mix(in srgb, black 93%, transparent)), url('/assets/images/ledger-bg.jpg') center 68%/cover no-repeat;border-top:3px solid var(--gold);}
.ledger-col.solution h3{color:var(--accent2);}
.ledger-col.edge h3{color:var(--gold);}
.ledger-grid{display:grid;grid-template-columns:1fr 1fr 1fr;}
.ledger-col{padding:50px 38px;border-right:1px solid var(--line-dark);}
.ledger-col:last-child{border-right:none;}
.ledger-col .tag{font-family:'IBM Plex Mono';font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:18px;display:block;}
.ledger-col.edge .tag{color:var(--gold);}
.ledger-col h3{color:var(--paper);font-size:1.3rem;margin-bottom:20px;}
.ledger-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.ledger-col li{font-size:0.96rem;color:var(--paper-dim);padding-left:20px;position:relative;}
.ledger-col.problem li::before{content:'—';position:absolute;left:0;color:var(--paper-faint);}
.ledger-col.solution li::before{content:'▸';position:absolute;left:0;color:var(--accent2);}
.ledger-col.edge li::before{content:'✦';position:absolute;left:0;color:var(--gold);font-size:0.8em;}
.ledger-col li b{color:var(--paper);font-weight:600;}
@media (max-width:900px){.ledger-grid{grid-template-columns:1fr;}.ledger-col{border-right:none;border-bottom:1px solid var(--line-dark);padding:40px 20px;}.ledger-col:last-child{border-bottom:none;}}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.svc-card{background:var(--card);padding:34px 28px;transition:background .2s, transform .25s ease, box-shadow .25s ease;}
.svc-card:hover{background:var(--surface);transform:translateY(-4px);box-shadow:0 16px 32px color-mix(in srgb, var(--ink) 10%, transparent);}
.svc-card svg{width:28px;height:28px;color:var(--accent-deep);margin-bottom:20px;}
.svc-card h3{font-size:1.1rem;margin-bottom:10px;}
.svc-card p{color:var(--ink-dim);font-size:0.93rem;margin:0 0 16px;}
.svc-card a.chip{font-family:'Inter';font-weight:600;font-size:0.82rem;color:var(--accent-deep);background:transparent;border:1.5px solid var(--accent-deep);padding:9px 16px;border-radius:var(--radius);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:background .18s ease, color .18s ease;}
.svc-card a.chip:hover{background:var(--accent-deep);color:white;}
.svc-card.shop{background:linear-gradient(160deg, var(--surface), var(--card));}
.svc-card:nth-child(2) svg,.svc-card:nth-child(2) h3,.svc-card:nth-child(2) a.chip{color:var(--accent2-deep);}
.svc-card:nth-child(2) a.chip{border-color:var(--accent2-deep);}
.svc-card:nth-child(2) a.chip:hover{background:var(--accent2-deep);color:white;}
.svc-card:nth-child(3) svg,.svc-card:nth-child(3) h3,.svc-card:nth-child(3) a.chip{color:var(--gold-deep);}
.svc-card:nth-child(3) a.chip{border-color:var(--gold-deep);}
.svc-card:nth-child(3) a.chip:hover{background:var(--gold-deep);color:var(--ink);}
.svc-card:nth-child(5) svg,.svc-card:nth-child(5) h3,.svc-card:nth-child(5) a.chip{color:var(--accent2-deep);}
.svc-card:nth-child(5) a.chip{border-color:var(--accent2-deep);}
.svc-card:nth-child(5) a.chip:hover{background:var(--accent2-deep);color:white;}
.shop-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.shop-badges a{font-family:'IBM Plex Mono';font-size:0.74rem;font-weight:600;border:1px solid var(--line-strong);padding:7px 11px;border-radius:var(--radius);text-decoration:none;color:var(--ink-dim);}
.shop-badges a:hover{border-color:var(--gold-deep);color:var(--gold-deep);}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr;}.svc-card{padding:30px 24px;}.svc-card.shop{grid-column:span 1 !important;}}

.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:2px;}
.gallery-grid .g-main{grid-column:span 2;grid-row:span 2;position:relative;overflow:hidden;}
.gallery-grid figure{margin:0;position:relative;overflow:hidden;background:var(--surface);}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gallery-grid figure:hover img{transform:scale(1.04);}
.gallery-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(180deg, transparent, color-mix(in srgb, black 92%, transparent));font-family:'IBM Plex Mono';font-size:0.76rem;color:var(--paper);letter-spacing:0.02em;}
@media (min-width:901px){.gallery-grid figure:last-child{grid-column:span 2;}}
@media (max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;}.gallery-grid .g-main{grid-column:span 2;grid-row:span 2;}}
@media (max-width:520px){.gallery-grid{grid-template-columns:1fr;grid-auto-rows:220px;}.gallery-grid .g-main{grid-column:span 1;grid-row:span 1;}}

.quote-section{background:var(--surface);border-top:3px solid var(--accent);position:relative;overflow:hidden;}
.quote-section::before{content:'';position:absolute;inset:-20% -10% auto auto;width:60%;height:140%;background:radial-gradient(circle, var(--gold-glow), transparent 65%);opacity:.22;pointer-events:none;}
.quote-section .glow-orb{width:340px;height:340px;left:-90px;bottom:-110px;background:radial-gradient(circle, var(--accent2-glow), transparent 70%);animation-duration:11s;opacity:.4;}
.quote-shell{position:relative;display:grid;grid-template-columns:1fr 1.15fr;border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:var(--card);}
.quote-copy{padding:48px 44px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line);}
.quote-copy h2{color:var(--ink);font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:16px;}
.quote-copy p{color:var(--ink-dim);font-size:1rem;max-width:34ch;}
.meter-readout{margin-top:26px;font-family:'IBM Plex Mono';font-size:0.78rem;color:var(--ink-faint);border-top:1px dashed var(--line-strong);padding-top:20px;display:flex;flex-direction:column;gap:8px;}
.meter-readout span b{color:var(--gold-deep);font-weight:600;}
form.quote-form{padding:44px 44px;display:flex;flex-direction:column;gap:20px;}
.goal-select{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.goal-select label{font-family:'Inter';font-weight:600;border:1px solid var(--line-strong);border-radius:var(--radius);padding:14px 8px;text-align:center;font-size:0.85rem;color:var(--ink-dim);cursor:pointer;transition:border-color .15s, color .15s, background .15s;}
.goal-select input{position:absolute;opacity:0;pointer-events:none;}
.goal-select label:has(input:checked){border-color:var(--accent);color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, transparent);}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:'IBM Plex Mono';font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);}
.field input{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:13px 14px;color:var(--ink);font-family:'Inter';font-size:0.95rem;}
.field input::placeholder{color:var(--ink-faint);}
.field input:focus{outline:none;border-color:var(--accent);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.quote-form small{color:var(--ink-faint);font-size:0.78rem;}
.quote-form .btn{justify-content:center;width:100%;}
@media (max-width:900px){.quote-shell{grid-template-columns:1fr;}.quote-copy{border-right:none;border-bottom:1px solid var(--line);}.field-row{grid-template-columns:1fr;}}
@media (max-width:640px){.quote-copy{padding:36px 26px;}form.quote-form{padding:36px 26px;}}
@media (max-width:480px){.goal-select{grid-template-columns:1fr;}}

.home-footer{position:relative;padding:48px 0 24px;border-top:3px solid var(--gold);color:var(--paper-dim);background:linear-gradient(180deg, color-mix(in srgb, black 88%, transparent), color-mix(in srgb, black 95%, transparent)), url('/assets/images/gallery-manila.jpg') center 30%/cover no-repeat;}
.home-footer .brand-name{color:var(--paper);}
.home-footer a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.stub{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;padding-bottom:28px;border-bottom:1px solid var(--line-dark);}
.stub-brand{display:flex;flex-direction:column;gap:12px;}
.stub-brand p{color:var(--paper-dim);font-size:0.92rem;max-width:32ch;margin:0;}
.stub h4{font-family:'IBM Plex Mono';font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--paper-faint);margin:0 0 10px;}
.stub-col{display:flex;flex-direction:column;gap:8px;font-size:0.9rem;}
.stub-col a{color:var(--paper-dim);text-decoration:none;}
.stub-col a:hover{color:var(--gold);}
.stub-row{display:flex;justify-content:space-between;gap:12px;font-family:'IBM Plex Mono';font-size:0.82rem;}
.stub-row .k{color:var(--paper-faint);}
.stub-row .v{color:var(--paper);text-align:right;}
.legal-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:16px;font-size:0.78rem;color:var(--paper-faint);}
.legal-links{display:flex;gap:16px;}
.legal-links a{color:var(--paper-dim);text-decoration:underline;}
.legal-links a:hover{color:var(--gold);}
@media (max-width:900px){.stub{grid-template-columns:1fr 1fr;}.legal-line{flex-direction:column;gap:6px;}}
@media (max-width:560px){.stub{grid-template-columns:1fr;gap:28px;}}

.site-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line);}
.site-nav{display:flex;gap:24px;}
.site-nav a{text-decoration:none;color:var(--ink-dim);}
.page-content h1{font-family:'Sora';font-weight:800;font-size:2rem;margin:0 0 24px;color:var(--ink);}
