:root{
    --ink:#141412;
    --paper:#F5F2EC;
    --paper-dim:#EDE9E0;
    --stone:#8C8577;
    --stone-light:#B5AFA1;
    --hairline:#D8D2C4;
    --ember:#B85C2E;
    --ember-dim:#8f4522;
    --serif:'Noto Serif TC', serif;
    --sans:'Noto Sans TC', sans-serif;
    --label:'Archivo', 'Noto Sans TC', sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--sans);
    font-weight:300;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;               /* guard stray horizontal scroll without breaking sticky nav */
  }

  a{color:inherit;text-decoration:none;}

  img{display:block;max-width:100%;}

  :focus-visible{
    outline:2px solid var(--ember);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  .wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- Nav ---------- */
  .site-nav{
    position:sticky;
    top:0;left:0;right:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:26px 40px;
    background:var(--paper);
    border-bottom:1px solid var(--hairline);
    transition:padding .3s ease, box-shadow .3s ease;
  }
  .site-nav.is-scrolled{
    padding-top:15px;
    padding-bottom:15px;
    box-shadow:0 1px 0 rgba(20,20,18,.05), 0 10px 30px -22px rgba(20,20,18,.55);
  }
  .site-nav, .site-nav a{ color:var(--ink); }
  .nav-mark{
    font-family:var(--label);
    font-size:14px;
    letter-spacing:.14em;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
  }
  .nav-badge{
    width:34px;
    height:34px;
    display:block;
    transition:width .3s ease, height .3s ease;
  }
  .nav-word{
    height:22px;
    width:auto;
    display:block;
    transition:height .3s ease;
  }
  .site-nav.is-scrolled .nav-badge{ width:28px; height:28px; }
  .site-nav.is-scrolled .nav-word{ height:18px; }
  body.hint-active .nav-mark img{ cursor:none; }
  .nav-links{
    display:flex;
    gap:34px;
    font-size:14px;
    letter-spacing:.04em;
  }
  .nav-links a{ position:relative; }
  .nav-links a::after{
    content:'';
    position:absolute;
    left:0;bottom:-4px;
    width:0;height:1px;
    background:currentColor;
    transition:width .3s ease;
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after{ width:100%; }
  .nav-toggle{ display:none; }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    height:calc(100vh - 81px);
    min-height:600px;
    overflow:hidden;
    background:var(--paper);
    color:var(--ink);
  }
  /* Interactive exploded-view camera — isometric line-art. Main body + lens are
     the interactive object (mouse turns the focus ring, the barrel racks out);
     small parts drift around the page (.page-debris). The gradient here is the
     fallback shown if the SVG fails to build. */
  .hero-scene{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    background:radial-gradient(circle at 58% 46%, rgba(184,92,46,.10), transparent 38%);
  }
  .hero-scene svg{
    position:absolute;
    top:42%;
    right:13%;
    transform:translateY(-50%);
    width:min(104vh, 960px);
    height:min(88vh, 760px);
    display:block;
    opacity:0;
    pointer-events:none;
    transition:opacity 1s ease;
  }
  @media (max-width:1200px){ .hero-scene svg{ right:4%; } }
  .hero-scene.is-ready svg{ opacity:1; }
  /* the shutter button is the one clickable spot in the scene */
  .hero-scene svg .shutter-hit{ pointer-events:auto; cursor:pointer; }

  /* Floating exploded parts, fixed behind the content (above nav-less layers). */
  .page-debris{
    position:fixed;
    inset:0;
    z-index:30;
    pointer-events:none;
    opacity:0;
    transition:opacity 1.4s ease;
  }
  .page-debris.is-ready{ opacity:1; }
  .page-debris svg{ display:block; width:100%; height:100%; overflow:visible; }
  /* keep the headline legible where it sits over the graphic */
  .hero::after{
    content:'';
    position:absolute;
    left:0;right:0;bottom:0;
    height:62%;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(to top, var(--paper) 16%, rgba(245,242,236,.5) 48%, transparent);
  }
  .hero-content.wrap{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:132px 40px 56px;
    pointer-events:none;               /* let clicks reach the camera behind */
  }
  .hero-content .hero-cta{ pointer-events:auto; }
  .hero h1{
    font-family:var(--serif);
    font-weight:600;
    font-size:clamp(44px, 8.4vw, 108px);
    line-height:1.06;
    max-width:14ch;
    letter-spacing:-0.01em;
    color:var(--ink);
  }
  .hero-foot{ max-width:640px; }
  .hero-sub{
    margin-bottom:24px;
    max-width:46ch;
    font-size:16px;
    font-weight:300;
    color:var(--stone);
  }
  .hero-sub .nb{ white-space:nowrap; }
  .hero-whatwedo{
    display:flex;
    align-items:baseline;
    width:fit-content;
    margin-bottom:16px;
    padding-bottom:6px;
    border-bottom:2px solid var(--ember);
    font-family:var(--label);
    font-size:15px;
    font-weight:600;
    letter-spacing:.16em;
    color:var(--ink);
  }
  .hero-whatwedo .type-cursor{
    display:inline-block;
    width:1px;
    height:.9em;
    margin-left:3px;
    background:var(--ember);
    animation:typeBlink 1s step-end infinite;
  }
  @keyframes typeBlink{ 50%{ opacity:0; } }
  .hero-cta{
    margin-top:40px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    font-family:var(--label);
    font-size:13px;
    letter-spacing:.1em;
    padding-bottom:6px;
    border-bottom:1px solid rgba(20,20,18,.4);
    width:fit-content;
    transition:border-color .25s ease, gap .25s ease;
  }
  .hero-cta:hover, .hero-cta:focus-visible{
    border-color:var(--ink);
    gap:18px;
  }
  .hero-foot .hero-cta{ margin-top:4px; }

  /* ---------- Section shell ---------- */
  section{ padding:120px 0; }
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:64px;
    border-bottom:1px solid var(--hairline);
    padding-bottom:28px;
  }
  .section-head h2{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(26px, 3vw, 36px);
  }
  .section-num{
    font-family:var(--label);
    font-size:13px;
    letter-spacing:.08em;
    color:var(--stone);
    white-space:nowrap;
  }

  /* ---------- Portfolio ---------- */
  /* Masonry-style column flow: uniform column width, cards pack tight with
     no leftover row-height gaps regardless of portrait/landscape mix. */
  .work-grid{
    column-count:3;
    column-gap:24px;
  }
  .work-card{
    position:relative;
    overflow:hidden;
    background:var(--paper-dim);
    display:block;
    color:inherit;
    break-inside:avoid;
    margin-bottom:24px;
  }
  .work-card.brand-card .work-caption{ opacity:1; transform:none; }
  .work-card.brand-card .view-hint{
    font-family:var(--label);
    font-size:11px;
    letter-spacing:.06em;
    color:var(--stone-light);
    display:block;
    margin-top:6px;
  }
  .work-card img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    aspect-ratio:2/3;
    transition:transform .7s cubic-bezier(.2,.7,.2,1);
    cursor:zoom-in;
  }
  .work-card.landscape img{ aspect-ratio:3/2; }
  .work-card:hover img{ transform:scale(1.035); }
  .work-caption{
    position:absolute;
    left:0;right:0;bottom:0;
    padding:26px 26px 22px;
    background:linear-gradient(180deg, transparent, rgba(10,8,6,.75));
    color:#fff;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease;
  }
  .work-card:hover .work-caption,
  .work-card:focus-within .work-caption{ opacity:1; transform:translateY(0); }
  .work-caption .cat{
    font-family:var(--label);
    font-size:11px;
    letter-spacing:.1em;
    color:var(--ember-dim);
    background:#fff;
    display:inline-block;
    padding:3px 8px;
    margin-bottom:8px;
  }
  .work-caption h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:19px;
  }
  .work-card.placeholder{
    aspect-ratio:2/3;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--hairline);
    color:var(--stone-light);
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.08em;
    text-align:center;
    padding:24px;
  }

  /* ---------- About ---------- */
  .about{
    background:var(--paper-dim);
  }
  .about-grid{
    display:grid;
    grid-template-columns:0.85fr 1fr;
    gap:72px;
    align-items:center;
  }
  .about-badge{
    width:100%;
    max-width:360px;
  }
  .about-copy p{
    font-size:17px;
    max-width:52ch;
    margin-bottom:20px;
  }
  .about-copy p:first-child{
    font-family:var(--serif);
    font-size:22px;
    line-height:1.7;
    color:var(--ink);
  }

  /* ---------- Services ---------- */
  .service-list{
    border-top:1px solid var(--hairline);
  }
  .service-row{
    display:grid;
    grid-template-columns:1fr 2.2fr;
    gap:32px;
    padding:30px 0;
    border-bottom:1px solid var(--hairline);
  }
  .service-row h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:20px;
  }
  .service-row p{
    color:var(--stone);
    font-size:15px;
    max-width:56ch;
  }

  /* ---------- Testimonial ---------- */
  .testimonial{
    background:var(--ink);
    color:var(--paper);
  }
  .testimonial blockquote{
    font-family:var(--serif);
    font-size:clamp(20px, 2.6vw, 30px);
    line-height:1.6;
    max-width:26ch;
  }
  .testimonial cite{
    display:block;
    margin-top:28px;
    font-style:normal;
    font-family:var(--label);
    font-size:13px;
    letter-spacing:.06em;
    color:var(--stone-light);
  }

  /* ---------- Contact ---------- */
  .contact{
    position:relative;
    background:var(--ink);
    color:var(--paper);
    overflow:hidden;
  }
  .contact::before{
    content:'';
    position:absolute;
    right:-120px; top:50%;
    width:420px;height:420px;
    transform:translateY(-50%);
    border-radius:50%;
    background:radial-gradient(circle at 40% 40%, rgba(184,92,46,.35), transparent 70%);
    filter:blur(2px);
  }
  .contact-inner{ position:relative; z-index:1; max-width:640px; }
  .contact h2{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(28px, 4vw, 42px);
    margin-bottom:26px;
    line-height:1.4;
  }
  .contact p{ color:var(--stone-light); margin-bottom:36px; max-width:48ch; }
  .contact-links{
    display:flex;
    flex-wrap:wrap;
    gap:36px;
  }
  .contact-links a{
    font-family:var(--label);
    font-size:15px;
    letter-spacing:.03em;
    padding-bottom:8px;
    border-bottom:1px solid rgba(245,242,236,.35);
    transition:border-color .25s ease;
  }
  .contact-links a:hover, .contact-links a:focus-visible{ border-color:var(--paper); }

  /* ---------- Footer ---------- */
  footer{
    padding:36px 0;
    background:var(--ink);
    border-top:1px solid rgba(245,242,236,.12);
  }
  .footer-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--stone-light);
    font-size:13px;
  }
  .footer-mark{ display:flex; align-items:center; gap:10px; }
  .footer-mark img{ width:26px; height:26px; opacity:.85; }

  /* ---------- Page header (sub-pages) ---------- */
  .page-header{
    position:relative;
    padding:88px 0 72px;
    background:var(--ink);
    color:var(--paper);
  }
  .page-header .eyebrow{
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.14em;
    color:var(--stone-light);
    margin-bottom:14px;
  }
  .page-header h1{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(30px, 4.4vw, 48px);
    max-width:16ch;
  }

  /* ---------- Story / editorial block ---------- */
  .story-grid{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:64px;
    align-items:start;
  }
  .story-portrait{
    width:100%;
    aspect-ratio:4/5;
    background:var(--paper-dim);
    border:1px solid var(--hairline);
    overflow:hidden;
  }
  .story-portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
  .story-portrait.placeholder-text{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:var(--stone-light);
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.08em;
    padding:24px;
    line-height:1.9;
  }
  .story-copy p{
    font-size:17px;
    max-width:56ch;
    margin-bottom:22px;
  }
  .story-copy p.lede{
    font-family:var(--serif);
    font-size:23px;
    line-height:1.75;
    color:var(--ink);
  }
  .edit-note{
    display:block;
    margin-top:-6px;
    margin-bottom:22px;
    padding:14px 18px;
    background:var(--paper-dim);
    border-left:2px solid var(--ember);
    font-family:var(--sans);
    font-size:14px;
    font-style:italic;
    color:var(--stone);
    max-width:56ch;
  }

  /* ---------- Philosophy list ---------- */
  .philosophy{ background:var(--paper-dim); }
  .philosophy-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
  }
  .philosophy-item .num{
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.08em;
    color:var(--ember);
    display:block;
    margin-bottom:16px;
  }
  .philosophy-item h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:20px;
    margin-bottom:12px;
  }
  .philosophy-item p{
    font-size:15px;
    color:var(--stone);
    max-width:36ch;
  }

  /* ---------- Inline CTA band ---------- */
  .cta-band{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    padding:56px 0;
    border-top:1px solid var(--hairline);
  }
  .cta-band h2{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(22px, 2.6vw, 30px);
  }
  .cta-band .hero-cta{ color:var(--ink); border-color:rgba(20,20,18,.4); }
  .cta-band .hero-cta:hover, .cta-band .hero-cta:focus-visible{ border-color:var(--ink); }

  /* ---------- Filter tabs (portfolio) ---------- */
  .filter-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
    margin-bottom:56px;
  }
  .filter-tabs button,
  .filter-tabs a{
    background:none;
    border:none;
    font-family:var(--label);
    font-size:13px;
    letter-spacing:.06em;
    color:var(--stone);
    cursor:pointer;
    padding-bottom:8px;
    border-bottom:2px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .filter-tabs button:hover,
  .filter-tabs a:hover{ color:var(--ink); }
  .filter-tabs button.active{
    color:var(--ink);
    border-bottom-color:var(--ember);
  }
  .work-card[hidden]{ display:none; }

  /* ---------- Contact form ---------- */
  .contact-form{
    display:grid;
    gap:26px;
    max-width:640px;
  }
  .form-row{ display:grid; gap:8px; }
  .form-row label{
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.06em;
    color:var(--stone-light);
  }
  .form-row input,
  .form-row textarea{
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(245,242,236,.35);
    padding:10px 2px;
    font-family:var(--sans);
    font-size:16px;
    color:var(--paper);
    resize:vertical;
    transition:border-color .25s ease;
  }
  .form-row input::placeholder,
  .form-row textarea::placeholder{ color:var(--stone); }
  .form-row input:focus,
  .form-row textarea:focus{
    outline:none;
    border-color:var(--paper);
  }
  .form-honeypot{ position:absolute; left:-9999px; opacity:0; }
  .form-submit{
    justify-self:start;
    margin-top:8px;
    background:var(--paper);
    color:var(--ink);
    border:none;
    font-family:var(--label);
    font-size:13px;
    letter-spacing:.08em;
    padding:15px 34px;
    cursor:pointer;
    transition:background .25s ease, transform .2s ease;
  }
  .form-submit:hover{ background:var(--ember); color:#fff; }
  .form-note{
    font-size:13px;
    color:var(--stone);
    margin-top:-6px;
  }
  .form-status{
    font-size:14px;
    padding:14px 16px;
    border-left:2px solid var(--ember);
    background:rgba(255,255,255,.04);
    display:none;
  }
  .form-status.show{ display:block; }
  .contact-alt{
    margin-top:64px;
    padding-top:40px;
    border-top:1px solid rgba(245,242,236,.14);
  }
  .contact-alt p{
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.06em;
    color:var(--stone-light);
    margin-bottom:16px;
  }

  /* ---------- Category grid (portfolio overview) — uniform tiles ---------- */
  .category-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
  }
  .category-grid .work-card{ grid-column:auto; margin-bottom:0; }
  .category-grid .work-card img,
  .category-grid .work-card.placeholder{
    aspect-ratio:4/5;
    height:auto;
  }
  .category-grid .work-card img{
    width:100%;
    object-fit:cover;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:860px){
    .category-grid{ grid-template-columns:repeat(2, 1fr); }
    .work-grid{ column-count:2; column-gap:16px; }
    .work-caption{ padding:18px 18px 16px; }
    .work-caption h3{ font-size:17px; }
    .site-nav{ padding:18px 20px; }
    .nav-links{
      position:fixed;
      top:0; right:0;
      height:100vh;
      width:min(78vw, 320px);
      background:var(--ink);
      color:var(--paper);
      flex-direction:column;
      justify-content:center;
      gap:28px;
      padding:40px;
      transform:translateX(100%);
      transition:transform .35s ease;
    }
    .nav-links a{ color:var(--paper); }
    .nav-links.open{ transform:translateX(0); }
    .nav-toggle{
      display:block;
      background:none;border:none;
      color:var(--ink);
      font-family:var(--label);
      font-size:13px;
      letter-spacing:.08em;
      cursor:pointer;
      z-index:41;
      position:relative;
    }
    .wrap{ padding:0 22px; }
    section{ padding:76px 0; }
    .work-caption{ opacity:1; transform:none; }
    .about-grid{ grid-template-columns:1fr; gap:40px; }
    .about-badge{ max-width:180px; }
    .service-row{ grid-template-columns:1fr; gap:10px; }
    .contact-links{ gap:22px; flex-direction:column; }
    .footer-row{ flex-direction:column; gap:14px; text-align:center; }
    .story-grid{ grid-template-columns:1fr; gap:32px; }
    .philosophy-grid{ grid-template-columns:1fr; gap:32px; }
    .page-header{ padding:64px 0 56px; }
    .cta-band{ flex-direction:column; align-items:flex-start; }
    .hero{ min-height:620px; }
    .hero::after{ height:76%; }
    .hero-content.wrap{ padding:100px 22px 48px; }
    .hero-scene svg{
      right:auto; left:50%;
      top:34%;
      transform:translate(-50%,-50%);
      width:min(140vw, 620px);
      height:min(62vh, 460px);
    }
  }

  /* Phones (portrait): single-column galleries — bigger images, roomy captions.
     Placed after the 860 block so it wins for the narrow range. */
  @media (max-width:560px){
    .work-grid{ column-count:1; }
    .category-grid{ grid-template-columns:1fr; }
    .work-card{ margin-bottom:16px; }
    .work-caption{ padding:20px 20px 18px; }
    .work-caption h3{ font-size:19px; }
    .wrap{ padding:0 20px; }
    section{ padding:64px 0; }
  }

  /* ---------- Lightbox (click-to-enlarge) ---------- */
  .lightbox-overlay{
    position:fixed;
    inset:0;
    z-index:100;
    background:rgba(10,8,6,.94);
    display:none;
    align-items:center;
    justify-content:center;
    padding:40px;
  }
  .lightbox-overlay.open{ display:flex; }
  .lightbox-overlay img{
    max-width:90vw;
    max-height:88vh;
    width:auto;
    height:auto;
    display:block;
    box-shadow:0 20px 60px rgba(0,0,0,.5);
  }
  .lightbox-close{
    position:absolute;
    top:24px; right:28px;
    background:none;
    border:none;
    color:#fff;
    font-family:var(--label);
    font-size:14px;
    letter-spacing:.08em;
    cursor:pointer;
    padding:10px 14px;
  }
  .lightbox-close:hover{ opacity:.7; }
  .lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    color:#fff;
    font-size:32px;
    line-height:1;
    cursor:pointer;
    padding:16px;
    opacity:.7;
  }
  .lightbox-nav:hover{ opacity:1; }
  .lightbox-prev{ left:12px; }
  .lightbox-next{ right:12px; }
  @media (max-width:640px){
    .lightbox-overlay{ padding:16px; }
    .lightbox-nav{ font-size:26px; padding:10px; }
  }

  /* ---------- Interactions: scroll progress ---------- */
  .scroll-progress{
    position:fixed;
    top:0; left:0; right:0;
    height:2px;
    z-index:50;
    background:var(--ember);
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:transform .12s linear;
    pointer-events:none;
  }

  /* ---------- Interactions: reveal on scroll ---------- */
  .reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    will-change:opacity, transform;
  }
  .reveal.is-in{
    opacity:1;
    transform:none;
  }

  /* ---------- Interactions: image blur-up ---------- */
  .blur-up{
    opacity:0;
    filter:blur(16px);
    transition:opacity .9s ease, filter .9s ease;
  }
  .blur-up.is-loaded{
    opacity:1;
    filter:blur(0);
  }
  /* keep the work-card hover zoom transition alive alongside blur-up */
  .work-card img.blur-up{
    transition:opacity .9s ease, filter .9s ease, transform .7s cubic-bezier(.2,.7,.2,1);
  }

  /* ---------- Interactions: work-card cursor hint ---------- */
  .cursor-hint{
    position:fixed;
    top:0; left:0;
    z-index:60;
    width:66px; height:66px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(20,20,18,.72);
    color:#fff;
    font-family:var(--label);
    font-size:11px;
    letter-spacing:.12em;
    text-align:center;
    pointer-events:none;
    opacity:0;
    transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
    transition:opacity .22s ease;
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
  .cursor-hint.is-visible{ opacity:1; }
  body.hint-active .work-card img{ cursor:none; }

  /* ---------- Interactions: anchor offset under sticky nav ---------- */
  :target{ scroll-margin-top:100px; }

  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    .blur-up{ opacity:1 !important; filter:none !important; transition:none !important; }
    .scroll-progress{ transition:none; }
    .cursor-hint{ display:none !important; }
    .page-debris{ opacity:.5; }
  }

  /* ---------- Pricing page + homepage price teaser ---------- */
  .plan-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
  .plan-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:34px 32px 30px;
    background:var(--paper);
    border:1px solid var(--hairline);
    transition:border-color .3s ease;
  }
  .plan-card:hover{ border-color:var(--ink); }
  .plan-card.featured{
    background:var(--ink);
    color:var(--paper);
    border-color:var(--ink);
  }
  .plan-tag{
    font-family:var(--label);
    font-size:11px;
    letter-spacing:.14em;
    color:var(--ember);
  }
  .plan-card.featured .plan-tag{ color:#E7A870; }
  .plan-name{
    font-family:var(--serif);
    font-weight:500;
    font-size:22px;
  }
  .plan-price{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(30px, 3.4vw, 40px);
    line-height:1.15;
  }
  .plan-price small{
    font-family:var(--sans);
    font-weight:300;
    font-size:14px;
    margin-left:8px;
    color:var(--stone);
    letter-spacing:.02em;
  }
  .plan-card.featured .plan-price small{ color:var(--stone-light); }
  .plan-list{
    list-style:none;
    display:grid;
    gap:8px;
    font-size:15px;
    color:var(--stone);
  }
  .plan-list li{ position:relative; padding-left:16px; }
  .plan-list li::before{
    content:'';
    position:absolute;
    left:0; top:.8em;
    width:8px; height:1px;
    background:currentColor;
  }
  .plan-card.featured .plan-list{ color:var(--stone-light); }
  .plan-list-dark{ color:var(--ink); margin-bottom:20px; }
  .plan-for{
    margin-top:auto;
    padding-top:16px;
    border-top:1px solid var(--hairline);
    font-size:14px;
    color:var(--ink);
  }
  .plan-card.featured .plan-for{
    border-top-color:rgba(245,242,236,.2);
    color:var(--paper);
  }
  .plan-note{
    margin-top:28px;
    max-width:62ch;
    font-size:14px;
    color:var(--stone);
  }

  .price-list{ border-top:1px solid var(--hairline); }
  .section-head + .price-list,
  .section-head + .faq{ border-top:none; }
  .price-row{
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:baseline;
    padding:24px 0;
    border-bottom:1px solid var(--hairline);
  }
  .price-row h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:19px;
  }
  .price-row p{
    margin-top:4px;
    font-size:14px;
    color:var(--stone);
  }
  .price-row .amt{
    font-family:var(--serif);
    font-size:20px;
    white-space:nowrap;
  }

  .example-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:28px;
  }
  .example{
    padding:2px 0 2px 18px;
    border-left:2px solid var(--ember);
  }
  .example h3{
    font-family:var(--serif);
    font-weight:500;
    font-size:18px;
    line-height:1.5;
  }
  .example h3 small{
    font-family:var(--sans);
    font-weight:300;
    font-size:13px;
    color:var(--stone);
  }
  .example .formula{
    margin-top:10px;
    font-family:var(--label);
    font-size:13px;
    letter-spacing:.04em;
    color:var(--stone);
  }
  .example .total{
    margin-top:2px;
    font-family:var(--serif);
    font-size:26px;
  }

  .eyebrow-dark{
    display:block;
    margin-bottom:14px;
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.14em;
    color:var(--ember);
  }
  .process-box{
    padding:34px 32px;
    background:var(--paper-dim);
    border:1px solid var(--hairline);
  }
  .process-box h3{
    margin-bottom:22px;
    font-family:var(--serif);
    font-weight:500;
    font-size:22px;
  }
  .steps{ list-style:none; display:grid; gap:20px; }
  .steps li{
    display:grid;
    grid-template-columns:34px 56px 1fr;
    align-items:baseline;
    gap:8px;
    font-size:15px;
  }
  .steps .num{
    font-family:var(--label);
    font-size:12px;
    letter-spacing:.08em;
    color:var(--ember);
  }
  .steps b{ font-family:var(--serif); font-weight:500; font-size:17px; }
  .steps li > span:last-child{ color:var(--stone); }

  .faq{ border-top:1px solid var(--hairline); max-width:820px; }
  .faq-item{ border-bottom:1px solid var(--hairline); }
  .faq-item summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:22px 0;
    cursor:pointer;
    list-style:none;
    font-family:var(--serif);
    font-weight:500;
    font-size:18px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary::after{
    content:'+';
    font-family:var(--label);
    font-size:22px;
    color:var(--ember);
    transition:transform .25s ease;
  }
  .faq-item[open] summary::after{ transform:rotate(45deg); }
  .faq-item p{
    padding:0 40px 24px 0;
    max-width:62ch;
    font-size:15px;
    color:var(--stone);
  }
  .cta-links{ display:flex; flex-wrap:wrap; gap:36px; align-items:center; }
  .cta-links .hero-cta{ margin-top:0; }
  .price-more{ margin-top:36px; }

  @media (max-width:860px){
    .example-grid{ grid-template-columns:repeat(2, 1fr); gap:32px 24px; }
  }
  @media (max-width:640px){
    .plan-grid{ grid-template-columns:1fr; }
    .plan-card{ padding:28px 24px 24px; }
    .price-row{ grid-template-columns:1fr; gap:6px; }
    .steps li{ grid-template-columns:30px 48px 1fr; }
    .faq-item p{ padding-right:0; }
  }
  @media (max-width:420px){
    .example-grid{ grid-template-columns:1fr; }
  }

/* ---------- Q-version camera (replaces the line-art camera when assets/camera/body.png exists) ---------- */
.hero-scene .qcam{
  position:absolute;
  top:42%; right:13%;
  margin-top:calc(min(88vh, 760px) / -2);
  height:min(88vh, 760px); aspect-ratio:1 / 1;
  pointer-events:none;
  opacity:0; transition:opacity 1s ease;
  will-change:transform;
}
@media (max-width:1200px){ .hero-scene .qcam{ right:4%; } }
.hero-scene .qcam.is-in{ opacity:1; }
.qcam-stage{ position:absolute; inset:0; transform-origin:50% 80%; }
.qcam-layer{ position:absolute; inset:0; width:100%; height:100%; will-change:transform; }
.qcam-fill{ width:100%; height:100%; object-fit:contain; display:block; user-select:none; -webkit-user-drag:none; }
.qcam-body{ pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.qcam-lens, .qcam-lens2, .qcam-ring, .qcam-flashunit{ pointer-events:none; }
.qcam-glow{
  position:absolute; width:0; height:0; opacity:0;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.98) 0%, rgba(255,236,190,.75) 28%, rgba(255,236,190,0) 68%);
  mix-blend-mode:screen; pointer-events:none;
}
.qcam-shutter{
  position:absolute; padding:0; border:0; background:transparent; border-radius:50%;
  pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.qcam-shutter:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.hero-scene .qcam-veil{
  position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none;
}
.qcam-stage.is-squish{ animation:qcamSquish .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes qcamSquish{ 0%{ scale:1 1; } 25%{ scale:1.04 .94; } 55%{ scale:.98 1.03; } 100%{ scale:1 1; } }
@media (max-width:860px){
  .hero-scene .qcam{
    right:auto; left:50%; top:52%;
    margin-top:calc(min(94vw, 400px) / -2);
    height:min(94vw, 400px);
    translate:-50% 0;
  }
}
@media (prefers-reduced-motion:reduce){ .qcam-stage.is-squish{ animation:none; } }
/* the paper-coloured fade was tuned for the line-art camera; keep only a thin blend at the bottom */
.hero.has-qcamera::after{ height:16%; }
@media (max-width:860px){ .hero.has-qcamera::after{ height:16%; } }
.qcam-press{
  position:absolute; pointer-events:none; opacity:0;
  transform-origin:50% 100%;
  transition:opacity .12s ease, transform .16s cubic-bezier(.3,1.5,.5,1), filter .16s ease;
}
.qcam-press.is-down{ opacity:1; transform:translateY(9%) scaleY(.94); filter:brightness(.78); transition-duration:.05s; }

/* With the dark Q camera behind the headline, the text group inverts where it overlaps the camera
   (difference blend: ink on paper, light on the black body). Colours below are the inverse of the
   look on paper: white -> near-ink, rgb(61,150,190) -> ember. */
.hero.has-qcamera .hero-content.wrap{ mix-blend-mode:difference; }
.hero.has-qcamera h1{ color:#fff; }
.hero.has-qcamera .hero-whatwedo{ color:#fff; border-bottom-color:rgb(61,150,190); }
.hero.has-qcamera .hero-whatwedo .type-cursor{ background:rgb(61,150,190); }
.hero.has-qcamera .hero-sub{ color:rgba(255,255,255,.68); }
.hero.has-qcamera .hero-foot .hero-cta{ color:#fff; border-bottom-color:rgba(255,255,255,.5); }
.hero.has-qcamera .hero-foot .hero-cta:hover,
.hero.has-qcamera .hero-foot .hero-cta:focus-visible{ border-bottom-color:#fff; }

/* ---------- Portfolio filters ---------- */
.portfolio-filters{ margin-bottom:40px; }
.portfolio-filters .filter-tabs{ margin-bottom:0; gap:6px 28px; }
.filter-type{ margin-bottom:18px; }
.filter-type button{ font-size:14px; }
.filter-tabs .n{ font-size:11px; color:var(--stone-light); margin-left:3px; }
.filter-tabs button.active .n{ color:var(--ember-dim); }
.filter-brand{ align-items:baseline; padding-top:16px; border-top:1px solid var(--hairline); gap:4px 22px; }
.filter-brand button{ font-size:12px; letter-spacing:.04em; padding-bottom:5px; }
.filter-label{ font-family:var(--label); font-size:11px; letter-spacing:.14em; color:var(--stone-light); }
.filter-count{ margin-top:18px; font-family:var(--label); font-size:12px; letter-spacing:.06em; color:var(--stone); }
.filter-empty{ padding:48px 0; color:var(--stone); text-align:center; }
.filter-reset{
  background:none; border:0; border-bottom:1px solid var(--ink); color:var(--ink);
  font:inherit; cursor:pointer; margin-left:10px; padding:0 0 2px;
}
.filter-tabs button:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
@media (max-width:640px){
  .portfolio-filters .filter-tabs{ gap:4px 20px; }
  .filter-type{ margin-right:-20px; padding-right:20px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .filter-type::-webkit-scrollbar{ display:none; }
  .filter-type button{ white-space:nowrap; flex:0 0 auto; }
}
.filter-tabs[hidden], .filter-tabs [hidden]{ display:none; }

/* ---------- About: scripture quote ---------- */
.story-verse{
  margin:8px 0 28px;
  padding:4px 0 4px 22px;
  border-left:2px solid var(--ember);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.9;
  color:var(--ink);
}
.story-verse cite{
  display:block;
  margin-top:10px;
  font-family:var(--label);
  font-style:normal;
  font-size:12px;
  letter-spacing:.1em;
  color:var(--stone);
}

/* ---------- Portfolio: left-to-right masonry (columns built by JS; CSS columns remain the no-JS fallback) ---------- */
.work-grid.is-cols{ column-count:auto; display:flex; gap:24px; align-items:flex-start; }
.work-grid.is-cols .work-col{ flex:1 1 0; min-width:0; }
.work-grid.is-cols .work-card{ margin-bottom:24px; }
.work-grid.is-cols .work-col .work-card:last-child{ margin-bottom:0; }
@media (max-width:860px){ .work-grid.is-cols{ gap:16px; } .work-grid.is-cols .work-card{ margin-bottom:16px; } }
.work-stash{ display:none; }

.steps em{ font-style:normal; color:var(--ink); font-weight:500; }