/* Alia Zaghloul — site styles
   Desktop (≥768px): every element is placed in the 1920 × 1080 artboard grid.
   1 artboard px = --u. Text is located by its PDF baseline (--b) and size (--fs).
   Mobile (<768px): the same content re-flows into a single column. */

@font-face{font-family:"Halogen";src:url(../fonts/Halogen-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Halogen";src:url(../fonts/Halogen-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Halogen";src:url(../fonts/Halogen-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Halogen";src:url(../fonts/Halogen-BoldOblique.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Halogen Form";src:url(../fonts/Halogen-Medium.woff2) format("woff2");font-weight:500;font-display:swap;ascent-override:75%;descent-override:49%;line-gap-override:0%}

:root{
  --u: calc(100vw / 1920);
  --sand:#d4cdc4;     /* artboard background */
  --olive:#969600;    /* studio green */
  --ink:#4c4420;      /* text */
  --cream:#d4cdc4;    /* light text */
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);font-family:"Halogen",system-ui,sans-serif;font-weight:500;
  -webkit-font-smoothing:antialiased;font-feature-settings:"liga" 1;text-rendering:optimizeLegibility}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul{margin:0;padding:0;font-weight:inherit;font-size:inherit}
ul{list-style:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* ---------- artboard primitives ---------- */
.scr{position:relative;height:calc(1080 * var(--u));overflow:hidden}
.ln{position:absolute;left:calc(var(--x) * var(--u));top:calc((var(--b) - 1.235 * var(--fs)) * var(--u));
  font-size:calc(var(--fs) * var(--u));line-height:1.24;white-space:nowrap}
.disp{font-weight:300;letter-spacing:.4em}
.body{font-weight:500}
.para{position:absolute;left:calc(var(--x) * var(--u));width:calc(var(--w) * var(--u));
  top:calc((var(--b) - 1.235 * var(--fs) - (var(--lh) - 1.24 * var(--fs)) / 2) * var(--u));
  font-size:max(calc(var(--fs) * var(--u)), 11px);line-height:calc(var(--lh) / var(--fs) * 1em);
  text-align:justify;hyphens:none}
.para p+p{margin-top:calc(var(--lh) / var(--fs) * 1em)}
.body.ln{font-size:max(calc(var(--fs) * var(--u)), 11px)}

.studio-box,.notes-portrait,.hd-burger,.hd-mono,.hero-cta,.hero-cta img,.cg,.notes-portrait img{
  position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));
  width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}

.scr-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-ctas{display:contents}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;height:calc(110 * var(--u));z-index:50;color:var(--ink);pointer-events:none;transition:color .35s var(--ease)}
.hd>*{pointer-events:auto}
.hd[data-bg="photo"]{color:var(--cream)}
.hd .hd-burger{color:var(--olive);transition:color .35s var(--ease)}
.hd[data-bg="photo"] .hd-burger{color:var(--cream)}
.hd[data-bg="olive"] .hd-burger{color:var(--ink)}
.hd-link,.hd-shop-btn,.hd-drop a{font-size:max(calc(18 * var(--u)), 11px);font-weight:500;transition:opacity .25s}
.hd-link:hover,.hd-shop-btn:hover,.hd-drop a:hover{opacity:.6}
.hd svg{width:100%;height:100%;display:block}
.hd-burger{display:block}
.hd-burger:hover,.hd-mono:hover{opacity:.7}
.hd-shop{position:absolute;left:calc(var(--x) * var(--u));top:calc((var(--b) - 1.235 * var(--fs)) * var(--u));line-height:1.24}
.hd-drop{position:absolute;left:0;top:calc(100% + 14 * var(--u));display:grid;gap:calc(10 * var(--u));
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.hd-shop.open .hd-drop{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.hd-drop a{display:block;white-space:nowrap}
.mob-only{display:none!important}

/* ---------- 01 hero ---------- */
.s-hero{background:var(--sand)}
.hero-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-cta{display:block;transition:opacity .3s}
.hero-cta .lbl{position:absolute;left:calc(var(--x) * var(--u));top:calc((var(--b) - 1.235 * var(--fs)) * var(--u));
  font-size:max(calc(var(--fs) * var(--u)), 11px);line-height:1.24;white-space:nowrap}
.arr{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:6px;
  transition:transform .35s var(--ease)}
.arr::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.arr::after{content:"";position:absolute;right:.5px;top:50%;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg)}
.hero-cta:hover .arr{transform:translateX(6px)}
.hero-cta img{transition:transform .5s var(--ease)}
.hero-cta:hover img{transform:translateY(-4px)}

/* ---------- 02 studio ---------- */
.s-studio{background:#b98a52}
.studio-box{background:var(--olive);color:var(--cream)}
.studio-body{text-align-last:center}
.dot{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(10.7 * var(--u));height:calc(10.7 * var(--u));
  border-radius:50%;background:var(--cream)}

/* ---------- 03 selected work ---------- */
.s-work{background:var(--sand)}
.cg{display:block;container-type:inline-size;--gw:var(--w)}
.cg-stage{position:absolute;inset:0;--g:calc(100cqw / var(--gw))}
.pc{position:absolute;overflow:hidden;left:calc(var(--x) * var(--g));top:calc(var(--y) * var(--g));width:calc(var(--w) * var(--g));height:calc(var(--h) * var(--g))}
.pc img{position:absolute;left:calc(var(--x) * var(--g));top:calc(var(--y) * var(--g));width:calc(var(--w) * var(--g));height:calc(var(--h) * var(--g));max-width:none}
.cap{position:absolute;left:calc(var(--x) * var(--g));top:calc((var(--b) - 1.235 * var(--fs)) * var(--g));
  font-size:max(calc(var(--fs) * var(--g)), 9px);line-height:1.24;white-space:nowrap;font-weight:500}
.cg .cg-stage{transition:transform .5s var(--ease)}
.cg:hover .cg-stage{transform:translateY(calc(-6 * var(--u)))}
.cg .cap{transition:opacity .3s}
.cg:hover .cap{opacity:.65}

/* ---------- 04 photo ---------- */
.s-photo{background:#b98a52}

/* ---------- 05 notes ---------- */
.s-notes{background:var(--olive);color:var(--ink);scroll-margin-top:0}
.notes-portrait{overflow:hidden}
.notes-portrait img{max-width:none}
.notes-body{text-align-last:left}
.ul{padding-bottom:0}
.ul::after{content:"";position:absolute;left:0;right:-3px;bottom:calc(.305em - 6px);height:1px;background:currentColor;transition:right .35s var(--ease)}
.ul::before{content:"";position:absolute;right:-2.5px;bottom:calc(.305em - 6px - 2px);width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);transition:right .35s var(--ease)}
.ul:hover::after{right:-9px}.ul:hover::before{right:-8.5px}

/* ---------- menu panel (artboard 04) ---------- */
.menu{position:fixed;inset:0;z-index:100;visibility:hidden;transition:visibility 0s .45s}
.menu.open{visibility:visible;transition:none}
.menu-scrim{position:absolute;inset:0}
.menu-panel{position:absolute;left:0;top:0;bottom:0;width:calc(683 * var(--u));min-width:320px;background:var(--olive);color:var(--cream);
  transform:translateX(-100%);transition:transform .45s var(--ease);overflow-y:auto}
.menu.open .menu-panel{transform:none}
.menu-panel svg{display:block;width:100%;height:100%}
.menu-close,.menu-word,.menu-search{position:absolute}
.menu-close{left:calc(30 * var(--u));top:calc(30 * var(--u));width:max(calc(30 * var(--u)),22px);height:max(calc(32 * var(--u)),23px)}
.menu-word{left:calc(160 * var(--u));top:calc(25 * var(--u));width:max(calc(380 * var(--u)),190px);height:max(calc(40 * var(--u)),20px)}
.menu-search{left:calc(600 * var(--u));top:calc(25 * var(--u));width:max(calc(50 * var(--u)),30px);height:max(calc(40 * var(--u)),24px)}
.menu-close:hover,.menu-search:hover,.menu-word:hover{opacity:.7}
.menu-list{position:absolute;left:calc(43 * var(--u));top:calc(166 * var(--u));font-size:max(calc(25 * var(--u)),18px);line-height:calc(46 / 25)}
.menu-item{display:inline-block;transition:opacity .25s}
.menu-item:hover{opacity:.65}
.menu-sub{display:none;padding:.15em 0 .35em 1.2em;font-size:.8em}
.menu-sub.open{display:block}
.menu-sub a:hover{opacity:.65}
.menu-searchbox{position:absolute;left:calc(43 * var(--u));right:calc(43 * var(--u));top:calc(96 * var(--u));display:none}
.menu-searchbox.open{display:block}
.menu.searching .menu-list{display:none}
.menu-searchbox input{width:100%;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;font:inherit;font-size:max(calc(18 * var(--u)),15px);padding:.4em 0;outline:none}
.menu-searchbox input::placeholder{color:inherit;opacity:.6}
.menu-results{margin-top:1.2em;font-size:max(calc(18 * var(--u)),15px);line-height:1.9}
.menu-results a:hover{opacity:.65}
.menu-results .empty{opacity:.7}

/* ================= MOBILE (<768px) ================= */
@media (max-width: 767px){
  :root{--m:16px}
  .scr{height:auto}
  .ln,.para,.hero-cta .lbl,.cap{position:static;font-size:inherit;white-space:normal}
  .para{width:auto}
  .mob-only{display:block!important}
  .studio-box,.notes-portrait,.hero-cta,.hero-cta img,.notes-portrait img{position:relative;left:auto;top:auto;width:auto;height:auto}

  .hd{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--m)}
  .hd-link{display:none}
  .hd-inquire{display:block!important;position:static;font-size:12px;letter-spacing:.02em}
  .hd-shop{display:none}
  .hd-burger{position:static;width:36px;height:26px}
  .hd-mono{position:absolute;left:50%;top:10px;width:46px;height:40px;transform:translateX(-50%)}

  .s-hero{min-height:100svh;display:flex;flex-direction:column;padding:64px 0 48px}
  .hero-art{object-fit:cover;object-position:62% 50%}
  .hero-title{margin:auto var(--m) 0;padding-top:12vh;text-align:center;font-size:clamp(17px,5.4vw,24px);line-height:1.5}
  .hero-title .ln{display:inline;margin-right:-.4em}
  .hero-title .ln::after{content:" "}
  .hero-sub{margin:20px auto 0;max-width:330px;text-align:center;font-size:11px;line-height:1.65}
  .hero-sub .ln{display:inline}
  .hero-sub .ln:first-child::after{content:" "}
  .hero-ctas{display:flex;justify-content:space-around;align-items:flex-end;margin-top:auto;padding:48px var(--m) 0}
  .s-hero .hero-cta{display:flex;flex-direction:column;align-items:center}
  .hero-cta img{width:96px;height:auto;margin:0 auto 12px}
  .cta-graphic img{width:80px}
  .hero-cta .lbl{display:block;text-align:center;font-size:12px;line-height:1.35}
  .hero-cta .arr{position:relative;left:auto;top:auto;width:80px;margin:6px auto 0}

  .s-studio{padding:72px var(--m) 96px;min-height:auto}
  .studio-box{padding:56px 22px 44px;text-align:center}
  .studio-title{font-size:clamp(17px,5.2vw,24px);line-height:1.5}
  .studio-title .ln{display:block;margin-right:-.4em}
  .studio-body{margin-top:36px;font-size:11px;line-height:1.75;text-align:center}
  .studio-tags{margin-top:40px;font-size:11px;line-height:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px}
  .studio-tags .ln{letter-spacing:.3em}
  .dot{position:static;width:6px;height:6px}

  .s-work{padding:56px var(--m) 24px;display:grid;grid-template-columns:1fr;gap:44px}
  .cg{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:var(--w) / var(--h)}
  .cap{position:absolute;font-size:max(calc(var(--fs) * var(--g)), 10px);white-space:nowrap}

  .s-photo{aspect-ratio:4 / 5}
  .s-photo .scr-bg{object-position:45% 50%}

  .s-notes{padding:0 var(--m) 40px}
  .s-notes{padding-top:56px}
  .notes-title{margin-top:32px;font-size:clamp(19px,6vw,26px);line-height:1.35}
  .notes-title .ln{display:block}
  .notes-portrait{margin-top:28px;width:72%;aspect-ratio:348 / 498.2}
  .notes-portrait img{position:absolute;left:-4.4%;top:0;width:111.6%;height:auto}
  .notes-body{margin-top:28px;font-size:12.5px;line-height:1.7}
  .notes-contact{margin-top:40px;display:grid;font-size:12px;line-height:1.9}
  .notes-contact .ln:nth-child(3){margin-top:16px}
  .notes-contact .ul{position:relative;left:auto;top:auto;justify-self:start}
  .notes-name{margin-top:72px;font-size:5.5vw;overflow:hidden}
  .notes-name .ln{display:block;letter-spacing:.4em;white-space:nowrap}

  .menu-panel{width:86vw}
  .menu-close{left:18px;top:22px}
  .menu-word{left:62px;top:24px;width:56vw;max-width:240px}
  .menu-search{left:auto;right:16px;top:22px}
  .menu-list{left:22px;top:104px;font-size:22px}
  .menu-searchbox{left:22px;right:22px;top:92px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
.menu-searchbox input{color:var(--cream);-webkit-appearance:none;appearance:none}
.menu-searchbox input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}

/* ================= SHOP ================= */
.ctr{position:absolute;left:calc(27.4 * var(--u));right:0;top:calc(var(--t) * var(--u));text-align:center;
  font-size:max(calc(var(--fs) * var(--u)), 11px);line-height:calc(var(--lh) / var(--fs));margin:0}
.ctr.disp{padding-left:.4em}
.plants{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.s-cat{background:var(--sand)}
.soon{color:var(--olive)}
.tile{display:block;color:inherit}
.tile-img{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));overflow:hidden}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover .tile-img img{transform:scale(1.035)}
.tile-cap{transform:translateX(-50%);font-size:max(calc(18 * var(--u)), 11px)}
.tile:hover .tile-cap{opacity:.65}

.s-shop{background:var(--olive);color:var(--cream)}
.shop-cats{position:absolute;inset:0}
.shop-cat{position:absolute;left:calc(27.4 * var(--u));right:0;top:calc((var(--b) - 1.235 * var(--fs)) * var(--u));
  text-align:center;font-size:max(calc(36 * var(--u)), 20px);line-height:1.24;width:max-content;margin:0 auto}
.shop-cat .disp{padding-left:.4em}
.shop-ul{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 1 * var(--u));width:calc(266 * var(--u));height:7px}
.shop-ul::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:right .35s var(--ease)}
.shop-ul::after{content:"";position:absolute;right:.5px;top:50%;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg);transition:right .35s var(--ease)}
.shop-cat:hover .shop-ul::before{right:-10px}.shop-cat:hover .shop-ul::after{right:-9.5px}
.shop-cat:hover .disp{opacity:.8}

/* product pages */
.s-prod{height:calc(var(--ph) * var(--u));background:var(--sand)}
.prod-main,.pth,.engr img{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.prod-main{overflow:hidden;background:#e8c9a8}
.prod-main img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.prod-main img.fade{opacity:0}
.pth{overflow:hidden;padding:0;cursor:pointer}
.pth img{width:100%;height:100%;object-fit:cover;transition:opacity .25s,transform .5s var(--ease)}
.pth:hover img{transform:scale(1.05)}
.pth[aria-current="true"]{outline:1px solid var(--ink);outline-offset:3px}
.prod-info{position:absolute;left:calc(var(--x) * var(--u));top:calc((var(--y) - 40.7) * var(--u));width:calc(529 * var(--u))}
.prod-title{font-size:max(calc(33.5 * var(--u)), 18px);line-height:1.2;white-space:nowrap}
.prod-copy{margin-top:calc(32.7 * var(--u));font-size:max(calc(13 * var(--u)), 11px);line-height:1.646}
.prod-copy p+p{margin-top:1.646em}
.prod-copy .just{text-align:justify}
.prod-copy .gap4{margin-top:6.585em}
.prod-copy .enq-wrap{margin-top:3.74em}
.enq{position:relative;display:inline-block}

/* inquiry page */
.s-inq{background:#6b5a2e}
.inq-box{position:absolute;left:calc(567 * var(--u));top:calc(171 * var(--u));width:calc(786 * var(--u));height:calc(740 * var(--u));background:var(--olive);color:var(--cream)}
.inq-box>*,.inq-form>*{position:absolute;left:calc(46 * var(--u));margin:0}
.inq-form{position:static}
.inq-title{top:calc(24.1 * var(--u));font-size:max(calc(36 * var(--u)),20px);line-height:1.2}
.inq-for{top:calc(124 * var(--u));font-size:max(calc(13 * var(--u)),11px);opacity:.85}
.inq-intro,.lbl,.reach{font-size:max(calc(18 * var(--u)),12px);line-height:1.278}
.inq-intro{top:calc(154.6 * var(--u));width:calc(700 * var(--u))}
.inq-form .lbl{display:block}
.inq-form>.lbl:nth-of-type(1){top:calc(247.1 * var(--u))}
#f-name{top:calc(285 * var(--u))}
.reach{top:calc(339.1 * var(--u));border:0;padding:0}
.reach legend{padding:0;margin-bottom:calc(23 * var(--u))}
.rad{display:inline-flex;align-items:center;gap:calc(8 * var(--u));margin-right:calc(14 * var(--u));cursor:pointer}
.rad input{position:absolute;opacity:0;pointer-events:none}
.rad span{width:max(calc(13 * var(--u)),10px);height:max(calc(13 * var(--u)),10px);border:1px solid currentColor;border-radius:50%;display:inline-grid;place-items:center}
.rad input:checked+span::after{content:"";width:55%;height:55%;border-radius:50%;background:currentColor}
.rad input:focus-visible+span{outline:1px solid currentColor;outline-offset:3px}
.js-contact{top:calc(426 * var(--u))}
.inq-form>label[for="f-msg"]{top:calc(477.1 * var(--u))}
.fld{width:calc(692 * var(--u));height:calc(40 * var(--u));min-height:30px;background:transparent;border:1px solid var(--cream);color:var(--cream);
  font:inherit;font-size:max(calc(15 * var(--u)),12px);padding:0 calc(11 * var(--u));border-radius:0;outline:none}
.fld::placeholder{color:var(--cream);opacity:.85}
.fld:focus{border-width:1.5px;background:rgba(212,205,196,.08)}
.fld-area{top:calc(518 * var(--u));height:calc(75 * var(--u));padding-top:calc(9 * var(--u));resize:none}
.send{top:calc(610 * var(--u));width:calc(692 * var(--u));height:calc(41 * var(--u));min-height:30px;background:var(--cream);color:var(--olive);font-size:max(calc(18 * var(--u)),12px);transition:opacity .25s}
.send:hover{opacity:.85}
.send[disabled]{opacity:.6;cursor:wait}
.inq-note{left:0!important;right:0;top:calc(694.4 * var(--u));text-align:center;color:var(--ink);font-size:max(calc(15 * var(--u)),11px)}
.inq-status{left:0!important;right:0;top:calc(658 * var(--u));text-align:center;font-size:max(calc(15 * var(--u)),11px)}
.hp{position:absolute!important;left:-9999px!important}

@media (max-width:767px){
  .ctr{position:static;padding:0 var(--m);font-size:inherit}
  .s-cat{height:auto;padding:110px 0 64px;text-align:center}
  .s-cat h1,.s-cat h2{font-size:clamp(20px,6vw,26px);line-height:1.3}
  .cat-intro,.soon{margin-top:18px!important;font-size:11px;line-height:1.7}
  .cat-intro br,.soon br{display:none}
  .soon{margin-top:64px!important}
  .tiles{display:grid;gap:36px;margin-top:40px;padding:0 var(--m)}
  .tile-img{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:3/2;display:block}
  .tile-cap{position:static;display:block;transform:none;margin-top:12px;font-size:12px;text-align:center}
  .tile-cap+.tile-cap{margin-top:2px}
  .s-shop{height:100svh;min-height:520px}
  .shop-cats{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:34px}
  .shop-cat{position:relative;left:auto;top:auto;font-size:24px;margin:0}
  .shop-ul{width:100%;top:calc(100% + 2px)}
  .s-prod{height:auto;padding:84px var(--m) 56px}
  .prod-main,.pth{position:relative;left:auto;top:auto;width:auto;height:auto}
  .prod-main{aspect-ratio:1/1}
  .prod-thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
  .pth{aspect-ratio:2/3}
  .prod-info{position:static;width:auto;margin-top:36px}
  .prod-title{font-size:clamp(18px,5.6vw,24px);white-space:normal}
  .prod-copy{margin-top:20px;font-size:12px}
  .prod-copy .gap4{margin-top:3em}
  .prod-copy .enq-wrap{margin-top:2.4em}
  .engr{display:grid;gap:32px;margin-top:56px}
  .engr img{position:static;width:100%;height:auto}
  .s-inq{height:auto;min-height:100svh;padding:84px var(--m) 48px}
  .s-inq .scr-bg{position:fixed}
  .inq-box{position:relative;left:auto;top:auto;width:auto;height:auto;padding:28px 20px 24px}
  .inq-box>*,.inq-form>*{position:static!important;width:auto}
  .inq-title{font-size:22px}
  .inq-for{margin-top:10px!important}
  .inq-intro{margin-top:16px!important;font-size:13px}
  .lbl,.reach{font-size:13px}
  .inq-form{display:grid;gap:10px;margin-top:22px}
  .reach legend{margin-bottom:10px}
  .fld{width:100%;height:42px;font-size:14px}
  .fld-area{height:96px}
  .send{width:100%;height:44px;font-size:14px;margin-top:6px}
  .inq-note,.inq-status{font-size:12px;margin-top:8px!important}
}
/* form text metrics (Halogen has tall ascenders; keep placeholders/labels optically centred) */
.fld{line-height:1.24;padding-top:0;padding-bottom:0}
input.fld,.fld-area{font-family:"Halogen Form","Halogen",sans-serif}
input.fld{padding-top:0;padding-bottom:0;line-height:1.24}
.fld-area{padding-top:.55em;line-height:1.4}
.send{line-height:1.24;padding-bottom:.22em}
.rad{vertical-align:top}
.inq-intro{width:calc(725 * var(--u))}
.rad span{transform:translateY(.2em)}
.s-prod{height:auto;min-height:calc(var(--ph) * var(--u));padding-bottom:calc(90 * var(--u))}
.prod-info{position:relative;left:auto;top:auto;margin-left:calc(var(--x) * var(--u));padding-top:calc((var(--y) - 40.7) * var(--u))}
@media (max-width:767px){.s-prod{padding-bottom:56px}.prod-info{margin-left:0;padding-top:0}}
.hp{display:none!important}
@media (max-width:767px){
  .inq-intro{width:auto!important}
  .inq-box{line-height:1.6}
  .inq-note{line-height:1.6}
}
@media (max-width:767px){.fld{padding:0 12px}.fld-area{padding-top:10px}.rad{margin-right:16px;gap:6px}}
.s-cat[style*="--sh"]{height:calc(var(--sh) * var(--u))}
.s-cat .plants[style]{bottom:auto}
@media (max-width:767px){.s-cat[style*="--sh"]{height:auto}#side{padding-top:24px}#coffee{padding-bottom:40px}}

/* ================= PORTFOLIO (artboard 07) ================= */
.s-pf{height:calc(2107.6 * var(--u));background:var(--sand)}
.pf-tags{position:absolute;left:calc(27.4 * var(--u));right:0;top:calc((313.7 - 1.235 * 14) * var(--u));display:flex;justify-content:center;align-items:center;
  gap:calc(34 * var(--u));color:var(--olive);font-size:max(calc(14 * var(--u)),11px);line-height:1.24;letter-spacing:.06em}
.pf-tags i{width:calc(9 * var(--u));height:calc(9 * var(--u));min-width:5px;min-height:5px;border-radius:50%;background:currentColor}
.pf{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(250.3 * var(--u))}
.pf-img{display:block;width:100%;height:calc(259 * var(--u));overflow:hidden}
.pf-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pf:hover .pf-img img{transform:scale(1.04)}
.pf-name{display:block;margin-top:calc(2.6 * var(--u));font-weight:700;font-size:max(calc(15 * var(--u)),10px);line-height:1.24}
.pf-cat{display:block;font-weight:700;font-style:italic;color:var(--olive);font-size:max(calc(12 * var(--u)),9px);line-height:1.24;margin-top:calc(.4 * var(--u))}
.pf:hover .pf-name{opacity:.65}

.s-tl{background:var(--olive);color:var(--cream)}
.tl-head{position:absolute;left:calc(27.4 * var(--u));right:0;top:calc((2345.8 - 2107.6 - 1.235 * 28 + 1.12) * var(--u));text-align:center;
  font-size:max(calc(28 * var(--u)),16px);line-height:1.2;padding-left:.4em}
.wk{position:absolute;left:calc(var(--x) * var(--u));top:calc((var(--y) - 2107.6 - 43.35) * var(--u));width:calc(570 * var(--u));text-align:center}
.wk h3{font-size:max(calc(35.1 * var(--u)),18px);line-height:1.24;padding-left:.4em;margin:0}
.wk p{font-size:max(calc(14 * var(--u)),10px);line-height:1.643;margin:0}
.wk-sub{margin-top:calc(2.75 * var(--u))!important}
.wk-lead{margin-top:calc(23 * var(--u))!important}
.wk-body{margin-top:calc(23 * var(--u))!important;text-align:justify;text-align-last:center}
.wk-nolead{margin-top:calc(46 * var(--u))!important}
.tl-arr{position:absolute;left:calc(881.7 * var(--u));top:calc((var(--y) - 2107.6) * var(--u) - 3px);width:calc(194.2 * var(--u));height:7px}
.tl-arr::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor}
.tl-arr::after{content:"";position:absolute;right:.5px;top:50%;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg)}

.s-contact{background:var(--sand);scroll-margin-top:0}
.ct-copy{position:absolute;left:calc(294.1 * var(--u));top:calc((459.3 - 1.235 * 36 + .72) * var(--u));width:calc(530 * var(--u))}
.ct-title{font-size:max(calc(36 * var(--u)),20px);line-height:1.2;margin:0}
.ct-p{font-size:max(calc(14 * var(--u)),11px);line-height:1.643;margin:calc(19.5 * var(--u)) 0 0}
.ct-p2{margin-top:calc(23 * var(--u))}
.ct-form{position:absolute;left:calc(933.5 * var(--u));top:calc(436.4 * var(--u));width:calc(692.4 * var(--u))}
.ct-f{display:block;position:relative;margin-bottom:calc(24 * var(--u))}
.ct-f span{position:absolute;left:calc(11.5 * var(--u));top:calc(8 * var(--u));font-size:max(calc(15 * var(--u)),11px);line-height:1.24;pointer-events:none;transition:opacity .2s}
.ct-f input,.ct-f textarea{display:block;width:100%;height:calc(40 * var(--u));min-height:30px;border:1px solid var(--ink);background:transparent;color:var(--ink);
  font-family:"Halogen Form","Halogen",sans-serif;font-size:max(calc(15 * var(--u)),12px);padding:0 calc(11.5 * var(--u));border-radius:0;outline:none}
.ct-f input:focus,.ct-f textarea:focus{border-width:1.5px}
.ct-f input:focus~span,.ct-f input:not(:placeholder-shown)~span{opacity:0}
.ct-f:has(input:focus) span,.ct-f:has(input:valid) span,.ct-f:has(textarea:focus) span,.ct-f:has(textarea:valid) span{opacity:0}
.ct-msg{margin-bottom:calc(18.6 * var(--u))}
.ct-msg textarea{height:calc(118.3 * var(--u));padding-top:calc(10 * var(--u));resize:none;line-height:1.4}
.ct-send{width:calc(118 * var(--u));min-width:64px;height:calc(38 * var(--u));min-height:26px;background:var(--olive);color:var(--cream);font-size:max(calc(18 * var(--u)),12px);line-height:1.24;padding-bottom:.22em;transition:opacity .25s}
.ct-send:hover{opacity:.85}.ct-send[disabled]{opacity:.6}
.ct-status{margin-top:calc(14 * var(--u));font-size:max(calc(14 * var(--u)),11px)}

/* ================= CASE STUDY (artboard 08) ================= */
.cs-intro{position:relative;height:calc(1132.4 * var(--u));background:var(--sand)}
.cs-img{position:absolute;left:calc(82.9 * var(--u));top:calc(140.5 * var(--u));width:calc(644.4 * var(--u));height:calc(889.5 * var(--u));overflow:hidden}
.cs-img img{width:100%;height:100%;object-fit:cover}
.cs-text{position:absolute;left:calc(968.2 * var(--u));width:calc(687.3 * var(--u));top:calc((443.2 - 1.235 * 36) * var(--u));text-align:center}
.cs-title{font-size:max(calc(36 * var(--u)),20px);line-height:1.24;padding-left:.4em;margin:0}
.cs-sub{color:var(--olive);font-size:max(calc(14 * var(--u)),11px);line-height:1.24;margin:calc(11.6 * var(--u)) 0 0}
.cs-dot{display:inline-block;margin:0 .7em}
.cs-copy{margin-top:calc(46.6 * var(--u));font-size:max(calc(14 * var(--u)),11px);line-height:1.643;text-align:justify;text-align-last:center}
.cs-copy p+p{margin-top:1.643em}
.cs-boards{display:grid;gap:calc(61.8 * var(--u));background:var(--sand)}
.cs-boards img{display:block;width:100%;height:auto}
.cs-seamless{gap:0}

@media (max-width:767px){
  .s-pf{height:auto;padding:100px var(--m) 56px}
  .pf-intro{font-size:11px;line-height:1.7}
  .pf-intro br{display:none}
  .pf-tags{position:static;flex-wrap:wrap;gap:6px 12px;margin-top:18px;font-size:10px}
  .pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 12px;margin-top:36px}
  .pf{position:static;width:auto}
  .pf-img{height:auto;aspect-ratio:250/259}
  .pf-name{font-size:11px;margin-top:7px}.pf-cat{font-size:9px}
  .s-tl{height:auto;padding:72px var(--m) 64px}
  .tl-head{position:static;font-size:18px;padding-left:.4em}
  .tl{display:grid;gap:44px;margin-top:44px}
  .wk{position:static;width:auto}
  .wk h3{font-size:22px}
  .wk p{font-size:11px}
  .wk-sub{margin-top:4px!important}.wk-lead,.wk-body{margin-top:14px!important}.wk-nolead{margin-top:14px!important}
  .tl-arr{display:none}
  .s-contact{height:auto;padding:72px var(--m) 64px}
  .ct-copy,.ct-form{position:relative;left:auto;top:auto;width:auto}
  .ct-title{font-size:22px}.ct-p{font-size:11px;margin-top:14px}
  .ct-form{margin-top:32px}
  .ct-f{margin-bottom:12px}.ct-f span{left:12px;top:10px;font-size:12px}
  .ct-f input{height:42px;padding:0 12px}.ct-msg textarea{height:120px;padding:12px}
  .ct-send{width:110px;height:40px;font-size:13px}
  .cs-intro{height:auto;padding:84px var(--m) 48px}
  .cs-img,.cs-text{position:static;width:auto;height:auto}
  .cs-img{aspect-ratio:644/890}
  .cs-text{margin-top:32px}
  .cs-title{font-size:22px}.cs-sub{font-size:11px;margin-top:6px}
  .cs-copy{margin-top:22px;font-size:12px}
  .cs-boards{gap:12px}
  .cs-seamless{gap:0}
}
/* case-study intro: cover keeps its own proportions, left edge fixed, text centred against it */
.cs-intro{height:auto;display:grid;grid-template-columns:calc(885.3 * var(--u)) calc(687.3 * var(--u));align-items:center;
  padding:calc(140.5 * var(--u)) 0 calc(102.4 * var(--u)) calc(82.9 * var(--u))}
.cs-img{position:static;width:auto;height:auto;overflow:visible;justify-self:start}
.cs-img img{display:block;width:auto;height:auto;max-height:calc(889.5 * var(--u));max-width:calc(760 * var(--u));object-fit:contain}
.cs-text{position:static;width:auto;top:auto}
@media (max-width:767px){
  .cs-intro{display:block;padding:84px var(--m) 48px}
  .cs-img{aspect-ratio:auto}
  .cs-img img{max-width:100%;max-height:none;width:100%}
}