/* === Cerulean Chemistry — Shopify Theme Styles === */
/* Base design system imported from base.css         */

/* ===================================================
   IMPORT NOTE: base.css contains all CSS variables,
   reset, and utility classes. This file contains
   component + layout styles.
   =================================================== */

/* === TYPE SCALE & TOKENS (duplicated for standalone safety) === */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem;
  --font-display: 'Zodiak', 'Georgia', serif;
  --font-body: 'Switzer', 'Helvetica Neue', sans-serif;
  --radius-sm: 0.375rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --content-narrow: 640px; --content-default: 960px;
  --content-wide: 1200px;
}
:root, [data-theme="light"] {
  --color-bg: #FAFAF7; --color-surface: #FFFFFF;
  --color-surface-2: #F5F4F0; --color-surface-offset: #EEECEA;
  --color-border: #D8D5CE; --color-divider: #E5E2DC;
  --color-text: #1A1A18; --color-text-muted: #6B6961; --color-text-faint: #A8A69E;
  --color-primary: #0A7E8C; --color-primary-hover: #066A76;
  --color-primary-active: #045560; --color-primary-light: #E6F4F6;
  --color-accent: #C8956C; --color-accent-hover: #B07D56;
  --shadow-sm: 0 1px 2px rgba(26,26,24,0.06);
  --shadow-md: 0 4px 12px rgba(26,26,24,0.08);
  --shadow-lg: 0 12px 32px rgba(26,26,24,0.12);
}
[data-theme="dark"] {
  --color-bg: #121210; --color-surface: #1A1918;
  --color-surface-2: #222120; --color-surface-offset: #1E1D1C;
  --color-border: #3A3835; --color-divider: #2A2927;
  --color-text: #E8E6E1; --color-text-muted: #9A9890; --color-text-faint: #605E58;
  --color-primary: #3FB5C3; --color-primary-hover: #2A9EAC;
  --color-primary-active: #1C8896; --color-primary-light: #1A2E30;
  --color-accent: #D4A87C; --color-accent-hover: #C49468;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#121210;--color-surface:#1A1918;--color-surface-2:#222120;
    --color-border:#3A3835;--color-divider:#2A2927;
    --color-text:#E8E6E1;--color-text-muted:#9A9890;--color-text-faint:#605E58;
    --color-primary:#3FB5C3;--color-primary-hover:#2A9EAC;
    --color-primary-light:#1A2E30;--color-accent:#D4A87C;
    --shadow-sm:0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:0 12px 32px rgba(0,0,0,0.4);
  }
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }
a { color: inherit; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { line-height: 1.2; }

/* === SKIP LINK === */
.skip-link { position:absolute;top:-100%;left:1rem;padding:.75rem 1.5rem;background:var(--color-primary);color:#fff;font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-md);z-index:1000;text-decoration:none;transition:top .2s; }
.skip-link:focus { top:1rem;outline:2px solid var(--color-primary);outline-offset:2px; }

/* === CONTAINER === */
.container { max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6); }
.container--narrow { max-width:var(--content-default); }

/* === HEADER === */
.site-header { position:sticky;top:0;z-index:300;background:rgba(250,250,247,0.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--color-divider);transition:box-shadow .3s; }
[data-theme="dark"] .site-header { background:rgba(18,18,16,0.92); }
.site-header--scrolled { box-shadow:var(--shadow-sm); }
.nav-inner { display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-4);max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6); }
.logo { display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text); }
.logo-mark { width:36px;height:36px;color:var(--color-primary); }
.logo-text { font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;letter-spacing:.02em; }
.nav-links { display:flex;align-items:center;gap:var(--space-6); }
.nav-links a { font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;font-weight:500;letter-spacing:.01em;transition:color var(--transition-interactive); }
.nav-links a:hover,.nav-links a.active { color:var(--color-text); }
.nav-cta { display:inline-flex;align-items:center;padding:var(--space-2) var(--space-5);background:var(--color-primary);color:#fff !important;border-radius:var(--radius-full);font-weight:600;transition:background var(--transition-interactive),transform var(--transition-interactive); }
.nav-cta:hover { background:var(--color-primary-hover) !important;transform:translateY(-1px); }
.theme-toggle { display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-full);color:var(--color-text-muted);transition:color var(--transition-interactive),background var(--transition-interactive); }
.theme-toggle:hover { color:var(--color-text);background:var(--color-surface-2); }
.nav-toggle { display:none;flex-direction:column;gap:5px;padding:var(--space-2); }
.nav-toggle span { width:22px;height:2px;background:var(--color-text);border-radius:2px;transition:transform .3s,opacity .3s; }
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
@media(max-width:768px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    /* Safari-safe full-screen height */
    height:100vh;
    height:-webkit-fill-available;
    height:100dvh;
    padding-top:80px;
    padding-left:var(--space-8);
    padding-right:var(--space-8);
    padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    flex-direction:column;
    background:#FAFAF7;
    gap:0;
    align-items:stretch;
    transform:translateX(100%);
    transition:transform .35s var(--ease-out);
    z-index:200;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  [data-theme="dark"] .nav-links { background:#121210; }
  .nav-links.open{transform:translateX(0);}
  .nav-links li { border-bottom:1px solid var(--color-divider); }
  .nav-links li:last-child { border-bottom:none; margin-top:var(--space-6); }
  .nav-links a {
    display:block;
    font-size:1.125rem;
    font-weight:600;
    color:var(--color-text);
    padding:var(--space-5) 0;
    text-decoration:none;
  }
  .nav-links a.active { color:var(--color-primary); }
  .nav-links .nav-cta {
    display:flex;
    justify-content:center;
    padding:var(--space-4) var(--space-6);
    border-radius:var(--radius-full);
    font-size:1rem;
    background:var(--color-primary);
    color:#fff !important;
  }
}

/* === BUTTONS === */
.btn { display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-size:var(--text-sm);font-weight:600;border-radius:var(--radius-full);text-decoration:none;cursor:pointer;transition:background var(--transition-interactive),color var(--transition-interactive),transform var(--transition-interactive),box-shadow var(--transition-interactive); }
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--color-primary);color:#fff;}
.btn-primary:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md);}
.btn-secondary{background:transparent;color:var(--color-text);border:1px solid var(--color-border);}
.btn-secondary:hover{border-color:var(--color-text-muted);box-shadow:var(--shadow-sm);}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--text-base);}

/* === HERO === */
.hero{position:relative;min-height:85vh;display:flex;align-items:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(250,250,247,0.9) 0%,rgba(250,250,247,0.65) 55%,rgba(250,250,247,0.25) 100%);}
[data-theme="dark"] .hero-overlay{background:linear-gradient(135deg,rgba(18,18,16,0.92) 0%,rgba(18,18,16,0.7) 55%,rgba(18,18,16,0.3) 100%);}
.hero-content{position:relative;z-index:1;max-width:700px;padding:var(--space-16) var(--space-6);}
.hero h1{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:500;color:var(--color-text);margin-bottom:var(--space-4);letter-spacing:-.01em;line-height:1.1;}
.hero-sub{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-8);max-width:580px;}
.hero-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;}

/* === SECTIONS === */
.section{padding-block:clamp(var(--space-12),8vw,var(--space-24));}
.section--alt{background:var(--color-surface-2);}
.section-header{margin-bottom:var(--space-10);}
.section-label{display:inline-block;font-size:var(--text-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-3);}
.section-title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;color:var(--color-text);margin-bottom:var(--space-3);}
.section-desc{font-size:var(--text-base);color:var(--color-text-muted);max-width:600px;line-height:1.7;}

/* === SERVICE CARDS === */
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:var(--space-6);}
.service-card{background:var(--color-surface);border:1px solid rgba(26,26,24,0.08);border-radius:var(--radius-lg);padding:var(--space-8);transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
[data-theme="dark"] .service-card{border-color:rgba(232,230,225,0.08);}
.service-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.service-icon{width:48px;height:48px;color:var(--color-primary);margin-bottom:var(--space-4);}
.service-card h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-3);color:var(--color-text);}
.service-card p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;}

/* === PROCESS === */
.process-grid{display:grid;gap:var(--space-6);counter-reset:step;}
.process-step{counter-increment:step;position:relative;padding:var(--space-6);}
.process-step::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;color:var(--color-primary);opacity:.35;margin-bottom:var(--space-3);line-height:1;}
.process-step h3{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2);color:var(--color-text);}
.process-step p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;}

/* === STATS === */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-6);text-align:center;padding-block:var(--space-8);}
.stat-item h3{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;color:var(--color-primary);margin-bottom:var(--space-1);}
.stat-item p{font-size:var(--text-sm);color:var(--color-text-muted);}

/* === SPLIT LAYOUT === */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center;}
@media(max-width:768px){.split{grid-template-columns:1fr;gap:var(--space-6);}}
.split-image{border-radius:var(--radius-lg);overflow:hidden;}
.split-image img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}

/* === PORTFOLIO === */
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-6);}
.portfolio-card{background:var(--color-surface);border:1px solid rgba(26,26,24,0.08);border-radius:var(--radius-lg);overflow:hidden;transition:box-shadow var(--transition-interactive),transform var(--transition-interactive);}
[data-theme="dark"] .portfolio-card{border-color:rgba(232,230,225,0.08);}
.portfolio-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
.portfolio-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--color-surface-2);}
.portfolio-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out);}
.portfolio-card:hover .portfolio-card-img img{transform:scale(1.04);}
.portfolio-card-body{padding:var(--space-6);}
.portfolio-card-body h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-2);color:var(--color-text);}
.portfolio-card-type{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-2);}
.portfolio-card-body p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.6;}

/* === TEAM / BIO === */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));gap:var(--space-8);}
.bio-card{display:flex;flex-direction:column;gap:var(--space-4);background:var(--color-surface);border:1px solid rgba(26,26,24,0.08);border-radius:var(--radius-lg);padding:var(--space-8);}
[data-theme="dark"] .bio-card{border-color:rgba(232,230,225,0.08);}
.bio-card h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;color:var(--color-text);margin-bottom:var(--space-1);}
.bio-role{font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4);}
.bio-card p{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;}

/* === CTA BANNER === */
.cta-banner{background:var(--color-primary);color:#fff;text-align:center;padding-block:clamp(var(--space-12),6vw,var(--space-20));}
.cta-banner h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:500;margin-bottom:var(--space-3);}
.cta-banner p{font-size:var(--text-base);opacity:.88;margin-bottom:var(--space-6);max-width:560px;margin-inline:auto;}
.cta-banner .btn-primary{background:#fff;color:var(--color-primary);}
.cta-banner .btn-primary:hover{background:#f0f0f0;}
.cta-banner .btn-secondary{border-color:rgba(255,255,255,0.4);color:#fff;}
.cta-banner .btn-secondary:hover{border-color:rgba(255,255,255,0.7);background:rgba(255,255,255,0.1);}

/* === FORM EMBED === */
.form-embed{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);border:1px solid rgba(26,26,24,0.08);}
.form-embed iframe{width:100%;min-height:1200px;border:none;display:block;}

/* === FAQ === */
.faq-list{max-width:720px;}
.faq-item{border-bottom:1px solid var(--color-divider);}
.faq-item summary{padding:var(--space-5) 0;font-size:var(--text-base);font-weight:600;color:var(--color-text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:var(--text-lg);color:var(--color-text-faint);transition:transform .3s var(--ease-out);flex-shrink:0;margin-left:var(--space-4);}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding-bottom:var(--space-5);font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;}

/* === PAGE HERO (interior) === */
.page-hero{padding-top:clamp(var(--space-12),8vw,var(--space-20));padding-bottom:clamp(var(--space-8),4vw,var(--space-12));}
.page-hero h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:500;color:var(--color-text);margin-bottom:var(--space-3);}
.page-hero p{font-size:var(--text-base);color:var(--color-text-muted);max-width:640px;line-height:1.7;}

/* === CONTACT === */
.contact-item{display:flex;align-items:flex-start;gap:var(--space-4);}
.contact-icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-primary-light);border-radius:var(--radius-md);color:var(--color-primary);}

/* === KEYWORD TAGS === */
.keyword-cloud{display:flex;flex-wrap:wrap;gap:var(--space-2);}
.keyword-tag{padding:var(--space-1) var(--space-3);background:var(--color-primary-light);color:var(--color-primary);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;}

/* === FOOTER === */
.site-footer{background:var(--color-surface);border-top:1px solid var(--color-divider);padding-block:var(--space-10);}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8);max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6);}
@media(max-width:768px){.footer-inner{grid-template-columns:1fr;}}
.footer-brand p{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.7;margin-top:var(--space-3);max-width:340px;}
.footer-col h4{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-4);letter-spacing:.04em;text-transform:uppercase;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:var(--space-2);}
.footer-col a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-interactive);}
.footer-col a:hover{color:var(--color-primary);}
.footer-col span{font-size:var(--text-sm);}
.footer-bottom{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-divider);display:flex;justify-content:space-between;align-items:center;max-width:var(--content-wide);margin-inline:auto;padding-inline:var(--space-6);flex-wrap:wrap;gap:var(--space-3);}
.footer-bottom p,.footer-bottom a{font-size:var(--text-xs);color:var(--color-text-faint);text-decoration:none;}
.footer-bottom a:hover{color:var(--color-text-muted);}

/* === SCROLL ANIMATIONS === */
.fade-in{opacity:1;}
@supports (animation-timeline: scroll()) {
  .fade-in{opacity:0;animation:reveal-fade linear both;animation-timeline:view();animation-range:entry 0% entry 100%;}
}
@keyframes reveal-fade{to{opacity:1;}}

/* === RTE (rich text) === */
.rte h2,.rte h3{font-family:var(--font-display);margin-bottom:var(--space-3);}
.rte p{margin-bottom:var(--space-4);line-height:1.7;}
.rte a{color:var(--color-primary);}
.rte ul,.rte ol{padding-left:var(--space-6);margin-bottom:var(--space-4);}
.rte li{margin-bottom:var(--space-2);}