/* css/style.css */
/* ================= TOKENS ================= */
:root{
  --bg:#F7F3EA;
  --bg-soft:#EFE8D8;
  --surface:#FBF9F3;
  --ink:#211D18;
  --ink-soft:#5C564A;
  --ink-faint:#948C7A;
  --line:#DDD2BA;
  --line-strong:#C6B896;
  --accent:#8A6A3E;
  --accent-deep:#4A3A22;
  --on-accent:#F7F3EA;
  --serif:'Cormorant Garamond', 'Times New Roman', 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --container:1320px;
  --gutter:clamp(20px,4vw,64px);
  --page-top:calc(150px + env(safe-area-inset-top,0px));
  --dur-s:.35s;
  --dur-m:.7s;
  --dur-l:1.1s;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme: light;
}
/* NOTE: this site intentionally does NOT switch to dark mode based on
   system preference, the warm ivory palette above is the single,
   consistent theme. `color-scheme: light` also tells the browser's own
   UI (scrollbars, form controls) to stay light regardless of the
   visitor's OS setting. If you want an explicit manual dark-mode toggle
   in the future, reintroduce a `:root[data-theme="dark"]{ ... }` block
   and flip `document.documentElement.dataset.theme` from a button. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: calc(96px + env(safe-area-inset-top,0px));}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-x:hidden;
  overflow-x:clip;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}
button{font-family:inherit; background:none; border:none; color:inherit; cursor:pointer;}
ul{list-style:none; margin:0; padding:0;}

.wrap{max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);}

::selection{background:var(--accent); color:var(--on-accent);}

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

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

/* ================= CUSTOM CURSOR ================= */
#cursor-dot,#cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  will-change:transform;
}
#cursor-dot{width:6px; height:6px; background:#fff; opacity:0;}
#cursor-ring{
  width:38px; height:38px; border:1px solid #fff; opacity:0;
  transition:width var(--dur-s) var(--ease), height var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:10px; letter-spacing:.12em; color:#fff;
}
body.has-cursor #cursor-dot,body.has-cursor #cursor-ring{opacity:1;}
body.has-cursor{cursor:none;}
body.has-cursor a,body.has-cursor button{cursor:none;}
#cursor-ring.big{width:96px; height:96px;}
#cursor-ring span{opacity:0; transform:scale(.8); transition:opacity var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);}
#cursor-ring.big span{opacity:1; transform:scale(1);}

/* ================= REVEAL ================= */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease);}
[data-reveal].in{opacity:1; transform:translateY(0);}
[data-reveal="clip"]{opacity:1; transform:none; clip-path:inset(0 0 100% 0); transition:clip-path var(--dur-l) var(--ease);}
[data-reveal="clip"].in{clip-path:inset(0 0 0% 0);}

/* ================= HEADER ================= */
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 88%, transparent), transparent);
  transition:background var(--dur-s) var(--ease);
}
#site-header.solid{background:var(--bg); border-bottom:1px solid var(--line);}
.header-inner{
  max-width:var(--container); margin:0 auto; padding:22px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{font-family:var(--serif); font-size:22px; letter-spacing:.01em; font-weight:500;}
.brand em{font-style:normal; color:var(--accent);}
nav.primary-nav{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px);}
nav.primary-nav a{
  font-size:14px; color:var(--ink-soft); position:relative; padding:4px 0;
  transition:color var(--dur-s) var(--ease);
}
nav.primary-nav a:hover, nav.primary-nav a.active{color:var(--ink);}
nav.primary-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1px; background:var(--accent);
  transition:right var(--dur-s) var(--ease);
}
nav.primary-nav a:hover::after, nav.primary-nav a.active::after{right:0;}
.header-right{display:flex; align-items:center; gap:20px;}
.lang-switch{display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.06em; color:var(--ink-soft);}
.lang-switch button{padding:2px 3px; color:var(--ink-faint); transition:color var(--dur-s) var(--ease);}
.lang-switch button.active{color:var(--ink); border-bottom:1px solid var(--accent);}
.hamburger{display:none; flex-direction:column; gap:5px; width:26px;}
.hamburger span{height:1px; background:var(--ink); width:100%; transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);}

/* Mobile navigation panel: only exists at <=1040px (see the Navigation block
   in the responsive section below), never rendered on desktop. */
#mobile-nav{display:none;}

@media (max-width:1040px){
  nav.primary-nav{display:none;}
  .hamburger{display:flex;}
}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ================= BUTTONS / LINKS ================= */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; border:1px solid var(--ink); border-radius:2px;
  font-size:13px; letter-spacing:.04em; color:var(--ink);
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.btn:hover{background:var(--ink); color:var(--bg);}
.btn.solid{background:var(--ink); color:var(--bg);}
.btn.solid:hover{background:var(--accent-deep); border-color:var(--accent-deep); color:var(--on-accent);}
.btn.ghost{border-color:var(--line-strong); color:var(--ink-soft);}
.btn.ghost:hover{border-color:var(--ink); color:var(--ink); background:transparent;}
.text-link{position:relative; font-size:13px; letter-spacing:.03em; padding-bottom:3px; border-bottom:1px solid var(--line-strong); transition:border-color var(--dur-s) var(--ease), color var(--dur-s) var(--ease);}
.text-link:hover{border-color:var(--ink); color:var(--accent-deep);}

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(120px + env(safe-area-inset-top,0px)); overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
  /* With a photo: dark overlay on top of the image for text legibility.
     Without a photo (.hero--no-image overrides this below): a solid
     charcoal fallback. */
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 34%, transparent) 0%, color-mix(in srgb, var(--ink) 14%, transparent) 45%, transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--ink) 10%, transparent) 0%, color-mix(in srgb, var(--ink) 56%, transparent) 100%),
    var(--hero-image, none);
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-color:transparent;
  transform:scale(1.08);
  animation:heroZoom 16s var(--ease) forwards;
}
/* Temporary solid charcoal fallback for when no hero image has been
   added yet. Hero title/subtitle/CTA stay white (see .hero-eyebrow,
   .hero h1, .hero-sub, .hero .btn below) — this only swaps the
   background layer, nothing else. The moment CONFIG.IMAGES.hero is
   set, this class simply isn't applied and the photo shows instead,
   with no change to layout. */
.hero--no-image .hero-media{
  background:#3A3936;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-inner{position:relative; z-index:1; padding:0 var(--gutter) 70px; max-width:var(--container); margin:0 auto; width:100%;}
.hero-eyebrow{color:#EDE6D3; font-size:13px; letter-spacing:.08em; margin-bottom:20px; opacity:.85;}
.hero h1{
  color:#FBF8F0; font-size:clamp(40px,7vw,92px); max-width:14ch; font-weight:400; line-height:1.22;
}
.hero h1 .line{display:block; overflow:hidden; line-height:1.22; padding-bottom:0.22em; margin-bottom:-0.22em;}
.hero h1 .line span{display:inline-block; transform:translateY(110%); animation:lineUp .9s var(--ease) forwards; animation-delay:calc(var(--i) * .12s + .15s);}
@keyframes lineUp{to{transform:translateY(0);}}
.hero-sub{color:#EDE6D3; opacity:.9; margin-top:26px; max-width:44ch; font-size:16px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:16px; margin-top:40px;}
.hero .btn{border-color:#FBF8F0; color:#FBF8F0;}
.hero .btn:hover{background:#FBF8F0; color:var(--ink);}
.hero .btn.solid{background:#FBF8F0; color:var(--ink);}
.hero .btn.solid:hover{background:var(--accent); color:var(--on-accent); border-color:var(--accent);}
.scroll-indicator{
  position:absolute; right:var(--gutter); bottom:34px; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px; color:#EDE6D3;
}
.scroll-indicator .line{width:1px; height:44px; background:currentColor; opacity:.5; overflow:hidden; position:relative;}
.scroll-indicator .line::after{content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff; animation:scrollLine 2.2s ease-in-out infinite;}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
.scroll-indicator span{font-size:11px; letter-spacing:.1em; writing-mode:vertical-rl;}

/* ================= SECTION SCAFFOLDING ================= */
section{padding:clamp(72px,9vw,140px) 0;}
.section-head{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); align-items:end; margin-bottom:clamp(40px,5vw,80px);
}
.section-head .label{grid-column:1/4; font-size:13px; color:var(--accent-deep); letter-spacing:.02em;}
.section-head h2{grid-column:1/9; font-size:clamp(30px,3.6vw,52px); font-weight:400;}
.section-head .desc{grid-column:9/13; font-size:14px; color:var(--ink-soft); align-self:end;}
@media (max-width:820px){
  .section-head, .section-head h2, .section-head .desc, .section-head .label{grid-template-columns:none; grid-column:1/-1;}
  .section-head{display:block;}
  .section-head .label{margin-bottom:12px; display:block;}
  .section-head .desc{margin-top:16px;}
}

/* ================= INTRODUCTION ================= */
.intro-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter);}
.intro-grid .intro-lede{grid-column:1/6;}
.intro-grid .intro-body{grid-column:7/13;}
.intro-lede h2{font-size:clamp(26px,3.2vw,40px); font-weight:400;}
.intro-body p{font-size:17px; color:var(--ink-soft); max-width:56ch;}
.intro-body .meta-row{display:flex; gap:36px; margin-top:36px; flex-wrap:wrap;}
.intro-body .meta-row div{font-size:13px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:12px; min-width:110px;}
.intro-body .meta-row strong{display:block; color:var(--ink); font-family:var(--serif); font-size:20px; font-weight:500; margin-bottom:4px;}
@media (max-width:820px){ .intro-grid .intro-lede,.intro-grid .intro-body{grid-column:1/-1;} .intro-grid{display:block;} .intro-lede{margin-bottom:28px;} }

/* ================= PLACEHOLDER MEDIA =================
   Clean, editorial image system: a real photo renders as a plain <img>;
   when no `image` path is set (or the file fails to load), a neutral
   bordered panel with a simple line icon and "IMAGE COMING SOON" label
   is shown instead. No abstract/generated graphics. */
.ph{
  position:relative; overflow:hidden; background:var(--bg-soft);
  border:1px solid var(--line);
  display:block;
}
.ph img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease);}
.ph.img-missing img{display:none;}
.ph-fallback{
  display:none; position:absolute; inset:0; z-index:1;
  flex-direction:column; align-items:center; justify-content:center; gap:12px;
  color:var(--ink-faint); background:var(--bg-soft);
}
.ph.img-missing .ph-fallback{display:flex;}
.ph-icon{width:30px; height:30px; opacity:.6;}
.ph-fallback span{font-size:10px; letter-spacing:.14em; text-transform:uppercase;}
.ph .ph-cap{
  position:absolute; left:14px; bottom:14px; z-index:3; font-size:11px; letter-spacing:.08em; color:#F7F3EA;
  background:color-mix(in srgb, var(--ink) 55%, transparent); padding:5px 10px;
}
.ph .ph-overlay{
  position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--ink) 55%, transparent) 100%);
  opacity:0; transition:opacity var(--dur-s) var(--ease); pointer-events:none;
}

/* ================= FEATURED PORTFOLIO (home) =================
   Even 2-column grid, every card the same size — no big/small pairing,
   see pickFeatured() in script.js which always keeps an even count. */
.featured-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter);}
.featured-grid .ph{aspect-ratio:16/9;}
.feat-card a{display:block;}
.feat-card .cap{margin-top:14px;}
.feat-card .cap .name{font-family:var(--serif); font-size:22px;}
.feat-card .cap .meta{font-size:12px; color:var(--ink-faint); letter-spacing:.04em; margin-top:4px;}
@media (max-width:700px){ .featured-grid{grid-template-columns:1fr;} }
.section-cta{margin-top:56px; display:flex; justify-content:center;}

/* ================= SERVICES PREVIEW / PAGE LIST ================= */
.service-list{border-top:1px solid var(--line);}
.service-row{
  display:grid; grid-template-columns:70px 1fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.service-row .num{font-family:var(--serif); font-size:16px; color:var(--ink-faint);}
.service-row .title{font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); font-weight:400;}
.service-row .sub{font-size:14px; color:var(--ink-soft); margin-top:6px; max-width:60ch;}
.service-row a.title-link{display:flex; align-items:baseline; justify-content:space-between; gap:20px;}
.service-row .arrow{font-size:13px; color:var(--ink-faint); transition:transform var(--dur-s) var(--ease);}
.service-row:hover .arrow{transform:translateX(6px);}

/* full services page detail */
.service-detail{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); padding:56px 0; border-bottom:1px solid var(--line);
}
.service-detail .sd-num{grid-column:1/2; font-family:var(--serif); font-size:15px; color:var(--ink-faint);}
.service-detail .sd-title{grid-column:2/6;}
.service-detail .sd-title h3{font-size:clamp(24px,2.6vw,34px); font-weight:400;}
.service-detail .sd-body{grid-column:6/10; font-size:15px; color:var(--ink-soft);}
.service-detail .sd-body .deliv-label{font-size:11px; letter-spacing:.08em; color:var(--ink-faint); margin-top:22px; margin-bottom:8px;}
.service-detail .sd-body ul li{font-size:14px; color:var(--ink-soft); padding:6px 0; border-top:1px solid var(--line);}
.service-detail .sd-media{grid-column:10/13;}
.service-detail .sd-media .ph{aspect-ratio:4/5;}
@media (max-width:900px){ .service-detail{display:block;} .service-detail>div{margin-bottom:20px;} }

.pricing-block{margin-top:90px; border-top:1px solid var(--line); padding-top:56px;}
.pricing-tiers{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:30px;}
.pricing-tier{background:var(--bg); padding:30px 22px; text-align:left;}
.pricing-tier h4{font-size:18px; font-weight:500;}
.pricing-tier p{font-size:12px; color:var(--ink-faint); margin-top:8px;}
@media (max-width:820px){ .pricing-tiers{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .pricing-tiers{grid-template-columns:1fr;} }

/* ================= PROCESS ================= */
.process-list{border-top:1px solid var(--line); max-width:900px;}
.process-item{display:grid; grid-template-columns:70px 1fr; gap:28px; padding:34px 0; border-bottom:1px solid var(--line); position:relative;}
.process-item .num{font-family:var(--serif); font-size:16px; color:var(--accent-deep);}
.process-item h3{font-size:clamp(20px,2.2vw,26px); font-weight:400;}
.process-item p{font-size:14px; color:var(--ink-soft); margin-top:8px; max-width:60ch;}

/* ================= PORTFOLIO ================= */
.cat-tabs{display:flex; flex-wrap:wrap; gap:10px 26px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; margin-bottom:56px; position:sticky; top:0; background:var(--bg); z-index:20;}
.cat-tabs button{font-size:13px; color:var(--ink-faint); padding:4px 0; position:relative; letter-spacing:.02em;}
.cat-tabs button.active{color:var(--ink);}
.cat-tabs button.active::after{content:""; position:absolute; left:0; right:0; bottom:-21px; height:1px; background:var(--accent);}
.cat-tabs button .count{font-size:11px; color:var(--ink-faint); margin-left:2px;}

.portfolio-cat{margin-bottom:80px;}
.portfolio-cat h3{font-size:clamp(22px,2.4vw,30px); font-weight:400; margin-bottom:26px; padding-bottom:14px; border-bottom:1px solid var(--line);}
/* 2 columns by default: every category has exactly 2 items, so this
   fills the container proportionally at every width down to mobile
   instead of leaving an empty third column. */
.portfolio-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter);}
.portfolio-grid .ph{aspect-ratio:16/9;}
@media (max-width:600px){ .portfolio-grid{grid-template-columns:1fr;} }

.pf-detail-hero{padding-top:var(--page-top); padding-bottom:40px;}
.pf-breadcrumb{font-size:12px; color:var(--ink-faint); margin-bottom:26px;}
.pf-breadcrumb a{border-bottom:1px solid var(--line-strong);}
.pf-detail-hero h1{font-size:clamp(32px,4.4vw,60px); font-weight:400; max-width:20ch;}
.pf-subline{margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:14px; color:var(--ink-soft);}
.pf-subline .dot{color:var(--ink-faint);}
.pf-subline a{border-bottom:1px solid var(--line-strong); color:var(--ink-soft);}
.pf-subline a:hover{color:var(--ink);}

.pf-detail-media{padding:40px 0 70px;}
.pf-detail-media .ph.big{aspect-ratio:16/9; margin-bottom:32px;}
.pf-visual-stack > div:last-child .ph.big{margin-bottom:0;}

.style-detail-media{padding:0 0 50px;}
.style-detail-media .ph.big{aspect-ratio:16/9;}
.pf-cat-label{font-family:var(--serif); font-size:clamp(20px,2.4vw,26px); font-weight:400; color:var(--ink); letter-spacing:.02em;}
.pf-concept{font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:72ch;}

.eyebrow-label{font-size:11px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:20px; display:block;}
.ph-row.three{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter);}
.ph-row.three .ph{aspect-ratio:16/9;}
@media (max-width:820px){ .ph-row.three{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .ph-row.three{grid-template-columns:1fr;} }

.pf-info-block{border-top:1px solid var(--line); padding-top:44px; padding-bottom:10px; max-width:560px;}
.pf-info-rows{display:flex; gap:56px; margin:22px 0 34px; flex-wrap:wrap;}
.pf-info-rows div{font-size:12px; color:var(--ink-faint);}
.pf-info-rows strong{display:block; color:var(--ink); font-family:var(--serif); font-size:19px; font-weight:500; margin-top:6px;}
.pf-info-rows strong a{border-bottom:1px solid var(--line-strong); color:var(--ink);}

/* ================= STYLES PAGE =================
   Paired 2-column card grid — every card has the same structure
   (image on top, then number/name/description/palette/link), no
   left/right alternating layout, so there's never a one-sided gap. */
.styles-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--gutter) var(--gutter); border-top:1px solid var(--line); padding-top:var(--gutter);}
.style-card{padding-bottom:48px; border-bottom:1px solid var(--line);}
.style-card-media{display:block;}
.style-card-media .ph{aspect-ratio:16/9;}
.style-card-text{margin-top:22px;}
.style-card-text .num{font-size:13px; color:var(--ink-faint); margin-bottom:12px; display:block;}
.style-card-text h3{font-size:clamp(24px,2.6vw,32px); font-weight:400;}
.style-card-text .character{font-size:14px; color:var(--ink-soft); margin-top:12px; max-width:46ch;}
.style-card-text .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.style-card-text .chips span{display:inline-flex; align-items:center; font-size:11px; color:var(--ink-faint); border:1px solid var(--line); padding:5px 10px 5px 8px;}
.style-card-text .chips span i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; border:1px solid color-mix(in srgb, var(--ink) 12%, transparent); flex:none;}
.style-card-text .text-link{margin-top:22px; display:inline-block;}
@media (max-width:820px){ .styles-grid{grid-template-columns:1fr; gap:0;} .style-card{padding:40px 0;} }

.style-detail-hero{padding-top:var(--page-top); padding-bottom:60px;}
.style-detail-hero .pf-breadcrumb{margin-bottom:26px;}
.style-detail-hero h1{font-size:clamp(34px,5vw,64px); font-weight:400;}
.style-detail-hero p{margin-top:18px; max-width:56ch; color:var(--ink-soft); font-size:16px;}
.style-spec{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:50px 0;}
.style-spec div{background:var(--bg); padding:26px 22px;}
.style-spec h5{font-size:11px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:12px;}
.style-spec p{font-size:14px; color:var(--ink-soft);}
.palette-swatches{display:flex; flex-wrap:wrap; gap:14px;}
.swatch-item{display:flex; flex-direction:column; align-items:center; gap:6px; width:58px;}
.swatch{width:34px; height:34px; border-radius:4px; border:1px solid var(--line-strong); display:block;}
.swatch-name{font-size:10px; color:var(--ink-faint); text-align:center; line-height:1.3;}
@media (max-width:820px){ .style-spec{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .style-spec{grid-template-columns:1fr;} }
.ref-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); margin-top:20px;}
.ref-gallery .ph{aspect-ratio:16/9;}
.ref-gallery.two{grid-template-columns:1fr 1fr;}
@media (max-width:820px){ .ref-gallery{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .ref-gallery{grid-template-columns:1fr;} }

/* ================= ABOUT ================= */
.about-hero{padding-top:calc(96px + env(safe-area-inset-top,0px)); display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); align-items:start;}
.about-hero .about-media{grid-column:1/6;}
.about-hero .about-media .ph{aspect-ratio:16/9; width:100%;}
.about-hero .about-copy{grid-column:6/13;}
.about-copy .kicker{font-size:13px; color:var(--accent-deep); margin-bottom:14px;}
.about-copy h1{font-size:clamp(30px,4vw,52px); font-weight:400; max-width:16ch;}
.about-copy p{margin-top:22px; font-size:16px; color:var(--ink-soft); max-width:52ch; text-indent:1.5em;}
@media (max-width:900px){ .about-hero{display:block; padding-top:calc(112px + env(safe-area-inset-top,0px));} .about-hero .about-media{margin-bottom:30px;} }
.focus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); margin-top:30px;}
.focus-grid div{border-top:1px solid var(--line); padding-top:16px;}
.focus-grid h4{font-size:16px; font-weight:500; font-family:var(--serif);}
.focus-grid p{font-size:13px; color:var(--ink-soft); margin-top:8px;}
@media (max-width:700px){ .focus-grid{grid-template-columns:1fr;} }

/* ================= FINAL CTA / CONTACT ================= */
.final-cta{text-align:center; padding-top:clamp(90px,11vw,160px); padding-bottom:clamp(90px,11vw,160px);}
.final-cta h2{font-size:clamp(32px,5.4vw,68px); font-weight:400; max-width:16ch; margin:0 auto;}
.final-cta p{margin-top:20px; color:var(--ink-soft); font-size:16px;}
.final-cta .btn{margin-top:44px;}
.contact-info{display:flex; justify-content:center; gap:50px; margin-top:64px; flex-wrap:wrap;}
.contact-info div{text-align:left;}
.contact-info--single{justify-content:center; text-align:center;}
.contact-info--single div{text-align:center;}
.contact-info h5{font-size:11px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:8px;}
.contact-info p{font-size:15px; color:var(--ink);}

/* ================= FOOTER ================= */
#site-footer{border-top:1px solid var(--line); padding:70px 0 40px; background:var(--bg-soft);}
.footer-top{display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); padding-bottom:50px;}
.footer-brand{grid-column:1/6;}
.footer-brand .brand{display:block; margin-bottom:16px;}
.footer-brand p{font-size:14px; color:var(--ink-soft); max-width:36ch;}
.footer-nav{grid-column:7/10;}
.footer-contact{grid-column:10/13;}
.footer-col h5{font-size:11px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:16px;}
.footer-col a,.footer-col p{display:block; font-size:14px; color:var(--ink-soft); padding:5px 0;}
.footer-col a:hover{color:var(--ink);}
.footer-bottom{border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; font-size:12px; color:var(--ink-faint); flex-wrap:wrap; gap:10px;}
@media (max-width:820px){ .footer-top{display:block;} .footer-top>div{margin-bottom:36px;} }

/* whatsapp floating */
.wa-float{
  position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:400;
  width:52px; height:52px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px color-mix(in srgb, var(--ink) 30%, transparent);
  transition:transform var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
}
.wa-float:hover{transform:translateY(-3px); background:#1EBE5A;}

/* ================= ADMIN PANEL ================= */
.admin-add-block{margin-top:50px; border-top:1px solid var(--line); padding-top:40px;}
.admin-add-block h3{font-family:var(--serif); font-size:22px; font-weight:500; margin-bottom:20px;}
.admin-add-block form, .admin-edit-panel form{display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; max-width:760px;}
.admin-add-block label, .admin-edit-panel label{display:flex; flex-direction:column; gap:6px; font-size:11px; letter-spacing:.04em; color:var(--ink-faint);}
.admin-add-block input, .admin-add-block select, .admin-add-block textarea,
.admin-edit-panel input, .admin-edit-panel select, .admin-edit-panel textarea{
  font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:2px; padding:10px 12px;
}
.admin-add-block textarea, .admin-edit-panel textarea{min-height:70px; resize:vertical;}
.admin-add-block label:has(textarea), .admin-edit-panel label:has(textarea){grid-column:1/-1;}
.admin-add-block button[type=submit], .admin-edit-panel .admin-form-actions{grid-column:1/-1; margin-top:6px;}
.admin-btn-sm{padding:11px 22px; font-size:12px;}
.file-status{font-size:11px; color:var(--ink-faint); margin-top:2px;}
@media (max-width:640px){ .admin-add-block form, .admin-edit-panel form{grid-template-columns:1fr;} }

.admin-cat-block{margin-top:56px; border-top:1px solid var(--line); padding-top:28px;}
.admin-cat-block h4{font-family:var(--serif); font-size:19px; font-weight:500; margin-bottom:18px;}
.admin-cat-block .admin-count{font-family:var(--sans); font-size:12px; color:var(--ink-faint); font-weight:400;}
.admin-empty{font-size:13px; color:var(--ink-faint);}
.admin-item{border:1px solid var(--line); margin-bottom:14px; padding:16px;}
.admin-item-main{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.admin-thumb{width:76px; height:52px; flex:none; background:var(--bg-soft); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.admin-thumb img{width:100%; height:100%; object-fit:cover;}
.admin-thumb span{font-size:9px; color:var(--ink-faint); text-align:center;}
.admin-has-image{color:var(--accent-deep);}
.admin-item-info{display:flex; flex-direction:column; gap:2px; flex:1; min-width:160px;}
.admin-item-info strong{font-family:var(--serif); font-size:16px; font-weight:500;}
.admin-item-info span{font-size:12px; color:var(--ink-faint);}
.admin-item-actions{display:flex; gap:8px; flex-wrap:wrap;}
.admin-item-actions button{font-size:11px; letter-spacing:.03em; color:var(--ink-soft); border:1px solid var(--line-strong); padding:7px 12px; transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease);}
.admin-item-actions button:hover:not(:disabled){background:var(--ink); color:var(--bg);}
.admin-item-actions button:disabled{opacity:.35; cursor:default;}
.admin-item-actions button.danger{color:#8a3a2e; border-color:#c9a89a;}
.admin-item-actions button.danger:hover{background:#8a3a2e; color:#fff;}
.admin-edit-panel{display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.admin-edit-panel.open{display:block;}

.admin-note{margin-top:70px; border-top:1px solid var(--line); padding-top:30px; padding-bottom:20px;}
.admin-note h5{font-size:11px; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:12px;}
.admin-note p{font-size:13px; color:var(--ink-soft); max-width:70ch;}
.admin-note ul{margin-top:12px; display:flex; flex-direction:column; gap:10px; max-width:70ch;}
.admin-note li{font-size:13px; color:var(--ink-soft); padding-left:16px; position:relative;}
.admin-note li::before{content:"·"; position:absolute; left:0; color:var(--ink-faint);}
.admin-note code{font-family:monospace; font-size:12px; background:var(--bg-soft); padding:1px 5px; border-radius:2px;}

/* =====================================================================
   RESPONSIVE REFINEMENTS (tablet + mobile)
   Everything below only adds or overrides at smaller widths, or fixes
   things that cannot cause visual changes on desktop. Desktop layout,
   colors, typography and content are untouched.
   Breakpoints used: 1040 (nav), 900/820 (tablet), 640 and 520 (phone),
   380 (small phone).
   ===================================================================== */

/* ---- Global safety (no visual change on desktop) ---- */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
a,button{-webkit-tap-highlight-color:color-mix(in srgb, var(--accent) 16%, transparent);}
h1,h2,h3,h4{overflow-wrap:break-word;}
.ph{max-width:100%;}
.hero{min-height:100vh; min-height:100svh;}

/* Grid and flex children may shrink below their content width, so long
   words or wide media can never push a grid wider than the viewport. */
.section-head>*, .intro-grid>*, .featured-grid>*, .portfolio-grid>*,
.styles-grid>*, .ref-gallery>*, .ph-row>*, .service-detail>*,
.about-hero>*, .footer-top>*, .pricing-tiers>*, .style-spec>*,
.focus-grid>*, .process-item>*, .service-row>*{min-width:0;}

/* Custom cursor is for mouse users only */
@media (hover:none), (pointer:coarse){
  #cursor-dot,#cursor-ring{display:none;}
}

/* ---- Navigation (hamburger range: up to 1040px) ----
   #mobile-nav is a fixed layer outside #app: it never takes part in the page
   flow, so it can not push or shift the content underneath.
   Phones (<700px): a compact sheet hangs directly under the header. It is
   exactly as tall as its seven links (scrolls only on very short screens);
   the page below is dimmed, and tapping the dimmed area closes the menu.
   Tablet (700-1040px): the same panel is a full-height drawer on the right. */
@media (max-width:1040px){
  /* keep the scrollbar gutter while the page is locked, so opening the menu
     can not shift the layout on browsers with classic scrollbars */
  html{scrollbar-gutter:stable;}

  /* hamburger: 44px tap target, 26px lines */
  .hamburger{width:44px; height:44px; align-items:center; justify-content:center; margin-right:-9px;}
  .hamburger span{width:26px; height:1.5px;}
  .hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  /* header stays above the menu: logo, language switch and X remain visible */
  body.nav-open #site-header{z-index:700; background:var(--bg); border-bottom:1px solid var(--line);}
  /* lock the page by clipping the viewport (html) only. body must NOT get
     overflow:hidden: with html,body{height:100%} that collapses the document
     height and the page jumps to the top every time the menu opens. */
  html.nav-open{overflow:hidden;}
  body.nav-open{overflow:visible;}

  /* fixed layer = dimmed backdrop; tapping outside the links closes (script.js) */
  #mobile-nav{
    position:fixed; inset:0; z-index:600;
    display:flex; flex-direction:column;
    background:color-mix(in srgb, var(--ink) 38%, transparent);
    opacity:0; visibility:hidden; pointer-events:none;
    overscroll-behavior:contain;
    transition:opacity var(--dur-s) var(--ease), visibility 0s linear var(--dur-s);
  }
  #mobile-nav.open{
    opacity:1; visibility:visible; pointer-events:auto;
    transition:opacity var(--dur-s) var(--ease), visibility 0s;
  }

  #mobile-nav-links{
    display:flex; flex-direction:column; min-height:0;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:var(--bg);
  }

  /* link rows: one calm rhythm, 50px each (comfortable thumb target) */
  #mobile-nav a{
    display:flex; align-items:center; justify-content:space-between;
    min-height:50px; padding:0;
    font-family:var(--serif); font-weight:500; line-height:1.2; font-size:21px;
    color:var(--ink); border-bottom:1px solid var(--line);
    transition:color var(--dur-s) var(--ease);
  }
  #mobile-nav a:last-child{border-bottom:0;}
  #mobile-nav a.active{color:var(--accent);}
  #mobile-nav a.active::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;}
  #mobile-nav a:active{color:var(--accent-deep);}
}

/* phones: compact sheet under the header */
@media (max-width:699px){
  #mobile-nav{padding-top:var(--header-h, calc(73px + env(safe-area-inset-top,0px)));}
  #mobile-nav-links{
    flex:0 1 auto;
    padding:2px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
    border-bottom:1px solid var(--line);
    transform:translateY(-8px); opacity:0;
    transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
  }
  #mobile-nav.open #mobile-nav-links{transform:none; opacity:1;}
}

/* tablet: full-height drawer on the right, page dimmed on the left */
@media (min-width:700px) and (max-width:1040px){
  #mobile-nav-links{
    flex:1 1 auto; width:min(380px,100%); margin-left:auto; border-left:1px solid var(--line);
    padding:calc(var(--header-h, calc(89px + env(safe-area-inset-top,0px))) + 8px) var(--gutter) calc(16px + env(safe-area-inset-bottom,0px));
    transform:translateY(-10px); transition:transform var(--dur-s) var(--ease);
  }
  #mobile-nav.open #mobile-nav-links{transform:none;}
}

/* ---- Tablet ---- */
/* sticky portfolio tabs must sit below the 89px tablet header, not behind it */
@media (min-width:641px) and (max-width:1040px){
  .cat-tabs{top:calc(89px + env(safe-area-inset-top,0px));}
}
@media (max-width:900px){
  .service-detail{padding:40px 0;}
  .service-detail .sd-media .ph{aspect-ratio:4/3;}
}
@media (max-width:820px){
  :root{--page-top:calc(116px + env(safe-area-inset-top,0px));}
  .pricing-block{margin-top:64px; padding-top:44px;}
  .portfolio-cat{margin-bottom:56px;}
  #site-footer{padding:56px 0 32px;}
  .footer-top{padding-bottom:20px;}
}

/* ---- Phones ---- */
@media (max-width:640px){
  /* header */
  .header-inner{padding:14px var(--gutter); gap:12px;}
  .brand{font-size:20px; white-space:nowrap;}
  .header-right{gap:10px;}
  .lang-switch{gap:2px;}
  .lang-switch button{padding:10px 6px; min-height:40px;}
  .lang-switch button.active{border-bottom-color:transparent; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:6px; text-decoration-thickness:1px;}
  html{scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));}

  /* hero */
  .hero{padding-top:calc(96px + env(safe-area-inset-top,0px));}
  .hero-inner{padding-bottom:48px;}
  .hero-eyebrow{font-size:12px; margin-bottom:16px;}
  .hero h1{font-size:clamp(34px,10.4vw,52px); max-width:100%;}
  .hero-sub{margin-top:20px; font-size:15.5px; max-width:100%;}
  .hero-ctas{flex-direction:column; align-items:stretch; gap:12px; margin-top:32px;}
  .hero-ctas .btn{width:100%;}
  .scroll-indicator{display:none;}

  /* buttons: comfortable tap size, never wider than the screen */
  .btn{min-height:48px; justify-content:center; text-align:center; max-width:100%;}
  .final-cta .btn{width:100%; max-width:380px; margin-top:36px;}
  .text-link{display:inline-block; padding:8px 0 4px;}

  /* section spacing stays generous but not oversized */
  .section-head{margin-bottom:36px;}
  .section-cta{margin-top:40px;}

  /* intro */
  .intro-body p{font-size:16px;}
  .intro-body .meta-row{gap:20px 28px; margin-top:28px;}
  .intro-body .meta-row div{flex:1 1 100px; min-width:0;}

  /* services + process rows */
  .service-row, .process-item{grid-template-columns:40px 1fr; gap:14px;}
  .service-row{padding:24px 0;}
  .process-item{padding:26px 0;}
  .service-row a.title-link{gap:12px;}

  /* portfolio: category tabs become one sticky, swipeable row */
  .cat-tabs{
    flex-wrap:nowrap; overflow-x:auto; gap:24px; padding:0 var(--gutter);
    margin:0 calc(var(--gutter) * -1) 36px;
    top:calc(73px + env(safe-area-inset-top,0px));
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .cat-tabs::-webkit-scrollbar{display:none;}
  .cat-tabs button{flex:none; white-space:nowrap; padding:16px 0;}
  .cat-tabs button.active::after{bottom:0;}
  .pf-detail-hero{padding-bottom:28px;}
  .pf-detail-media{padding:28px 0 52px;}
  .pf-detail-media .ph.big{margin-bottom:20px;}
  .pf-info-rows{gap:24px 36px;}
  .pf-info-block{padding-top:34px;}

  /* style detail */
  .style-spec{margin:36px 0;}
  .style-spec div{padding:20px 18px;}
  .style-detail-hero{padding-bottom:40px;}

  /* about, contact */
  .about-hero .about-media{margin-bottom:24px;}
  .contact-info{gap:28px 40px; margin-top:48px;}
  .contact-info p{overflow-wrap:anywhere;}

  /* footer: keep the last links clear of the floating WhatsApp button */
  #site-footer{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));}
  .footer-top>div{margin-bottom:28px;}
  #footer-nav-links{display:grid; grid-template-columns:1fr 1fr; column-gap:24px;}
  .footer-col a{padding:8px 0;}
  .footer-bottom{flex-direction:column; gap:6px;}

  /* floating WhatsApp */
  .wa-float{right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));}

  /* admin */
  .admin-add-block, .admin-cat-block{margin-top:40px;}
  .admin-item{padding:14px;}
  .admin-add-block input, .admin-add-block select, .admin-add-block textarea,
  .admin-edit-panel input, .admin-edit-panel select, .admin-edit-panel textarea{font-size:16px;}
  .admin-item-actions button{padding:10px 14px;}
  .admin-note code{overflow-wrap:anywhere;}
}

/* single column galleries: .ref-gallery.two was out-ranking the generic rule */
@media (max-width:520px){
  .ref-gallery.two{grid-template-columns:1fr;}
  .ref-gallery, .ph-row.three, .featured-grid, .portfolio-grid{gap:16px;}
  .contact-info{flex-direction:column; align-items:center;}
}

/* ---- Small phones (360 to 380) ---- */
@media (max-width:380px){
  .brand{font-size:18px;}
  .header-right{gap:6px;}
  .hero h1{font-size:clamp(30px,10vw,40px);}
  .style-card-text .chips span{font-size:10.5px;}
}