/* Daaistudio graphics (Oct 2026). Real PSD mockups of our client sites, never devices drawn in CSS.
   Two looks, approved by Daai on board v4/v5:
   - .gx-hero  service-page hero as a tile: warm night to paper gradient, very fine grain, gold horizon, square frames
   - .gx-show  sections about design: no-background Apple-style mockup on the page paper, with a short caption
   Rules: one screen appears once per page; a section pairs at most one laptop with one phone; neighbours share a tone;
   a device whose screen faces right sits left of its text. Thai text is never letter-spaced. */

:root{--gx-m:clamp(12px,3vw,48px);--gx-on:#f7f3ea;--gx-gold:#e0c48e}

/* ── hero tile ── */
.gx-hero{position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 2 * var(--gx-m));max-width:1296px;margin:20px auto 0;
  background:linear-gradient(180deg,#0d0b09 0%,#15110c 60%,#2a2117 100%)}
.gx-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}
.gx-hero .page-hero{position:relative;z-index:1;padding:clamp(44px,6vw,96px) clamp(20px,4.5vw,64px) clamp(36px,4vw,60px)}
.gx-hero .page-h1{color:var(--gx-on)}
.gx-hero .page-lead{color:rgba(247,243,234,.78)}
.gx-hero .page-lead strong{color:var(--gx-gold)}
.gx-hero .page-meta span{color:rgba(247,243,234,.86);border-color:rgba(247,243,234,.24)}
.gx-hero .btn{border-color:rgba(247,243,234,.4);color:var(--gx-on)}
.gx-hero .btn::before{background:var(--gx-on)}
.gx-hero .btn:hover{color:var(--ink)}
.gx-hero .btn-solid{background:var(--navy);border-color:var(--navy);color:#fff}
.gx-hero .btn-solid::before{background:var(--gx-on)}
.gx-hero .btn-solid:hover{color:var(--ink)}
.gx-hero .btn:focus-visible{outline:2px solid var(--gx-gold);outline-offset:3px}

/* frames: equal heights because the column ratio matches the image widths (560 : 760, both 500 high) */
.gx-frames{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,56fr) minmax(0,76fr);gap:clamp(12px,2.6vw,40px);
  padding:clamp(28px,4vw,56px) clamp(16px,4.5vw,64px) clamp(32px,5vw,72px);
  background:linear-gradient(180deg,#2a2117 0%,#6b5a3a 32%,#b39a6a 58%,#e6dccb 82%,#f7f6f4 100%)}
.gx-frames.mac-first{grid-template-columns:minmax(0,76fr) minmax(0,56fr)}
.gx-frames::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(224,196,142,0),rgba(255,236,196,.9) 30%,rgba(224,196,142,.2) 75%,rgba(224,196,142,0));
  box-shadow:0 0 24px 2px rgba(224,196,142,.35)}
.gx-ph{margin:0;min-width:0;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.55),0 30px 70px rgba(25,18,10,.32)}
.gx-ph img{display:block;width:100%;height:auto}
@media(max-width:640px){
  .gx-hero{margin-top:12px}
  .gx-frames,.gx-frames.mac-first{grid-template-columns:minmax(0,1fr)}
}

/* ── no-background mockup with caption (sections about design) ── */
.gx-show{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:center;gap:clamp(20px,4vw,64px);margin:clamp(36px,5vw,72px) 0 clamp(40px,5vw,72px)}
.gx-show.img-right{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.gx-show.img-right .gx-show-img{order:2}
.gx-show-img{min-width:0}
.gx-show-img img{display:block;width:100%;height:auto}
.gx-show-cap{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.gx-show-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
html[lang="th"] .gx-show-k,html[lang="ja"] .gx-show-k{font-family:var(--sans);font-size:14px;letter-spacing:normal;text-transform:none}
.gx-show-name{font-family:var(--sans);font-size:clamp(24px,2.4vw,34px);font-weight:300;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.gx-show-d{font-size:15.4px;line-height:1.6;color:var(--muted)}
.gx-show-go{margin-top:6px;font-size:14.3px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--navy);padding-bottom:2px}
.gx-show-go:hover{color:var(--navy)}
.gx-show-go:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
@media(max-width:720px){
  .gx-show,.gx-show.img-right{grid-template-columns:minmax(0,1fr)}
  .gx-show.img-right .gx-show-img{order:0}
}

/* no-background phone: keep a portrait device at a readable size, never full column width */
.gx-show.is-phone{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.gx-show.is-phone .gx-show-img img{max-width:300px;margin-inline:auto}

/* ── tile inside a section: same gradient, grain and gold line as the hero, frames only ── */
.gx-tile{position:relative;isolation:isolate;overflow:hidden;margin:clamp(28px,4vw,48px) 0 clamp(36px,5vw,64px);
  background:linear-gradient(180deg,#0d0b09 0%,#2a2117 24%,#6b5a3a 46%,#b39a6a 66%,#e6dccb 86%,rgba(240,238,234,0) 100%)}
.gx-tile::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>")}
.gx-tile-k{position:relative;z-index:1;margin:0;padding:clamp(28px,4vw,48px) clamp(16px,4.5vw,64px) clamp(20px,3vw,32px);
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gx-gold)}
.gx-tile .gx-frames{background:none}
.gx-tile .gx-ph{background:#111}
.gx-tile-cap{position:relative;z-index:1;margin:0;padding:0 clamp(16px,4.5vw,64px) clamp(28px,4vw,48px);font-size:15.4px;line-height:1.7;color:#3d3a34}
.gx-tile-cap a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--navy);padding-bottom:1px}
.gx-tile-cap a:hover{color:var(--navy)}
.gx-tile-cap a:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
/* proof screenshots: two equal frames, the full answer stays visible (no crop) */
.gx-frames.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.gx-frames.even .gx-ph{aspect-ratio:1100/907;background:#fff}
.gx-frames.even .gx-ph img{height:100%;object-fit:contain;object-position:top}
@media(max-width:640px){.gx-frames.even{grid-template-columns:minmax(0,1fr)}}

/* ── single framed mockup photo (one device in a real setting) ── */
.gx-single{margin:clamp(28px,4vw,48px) 0;max-width:760px}
.gx-single .gx-ph{box-shadow:0 0 0 1px rgba(255,255,255,.35),0 30px 70px rgba(0,0,0,.35)}

/* ── step line: a visual summary of the steps listed below it (the list stays the readable source) ── */
.gx-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:clamp(28px,4vw,44px) 0 clamp(36px,5vw,56px);padding:0;list-style:none}
.gx-flow::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:1.5px;background:linear-gradient(90deg,var(--navy),rgba(123,105,68,.3))}
.gx-node{position:relative;min-width:0;text-align:center}
.gx-node .gx-dot{display:grid;place-items:center;width:56px;height:56px;margin:0 auto;background:var(--bg);border:1.5px solid var(--navy);
  font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--navy)}
.gx-node:first-child .gx-dot{background:var(--navy);color:#fff}
.gx-node b{display:block;margin-top:18px;font-size:17.6px;font-weight:500;line-height:1.4;color:var(--ink)}
.gx-node>span:not(.gx-dot){display:block;margin-top:6px;font-size:14.3px;line-height:1.5;color:var(--muted)}
.page-sec.band .gx-dot{background:#f1efeb}
.page-sec.band .gx-node:first-child .gx-dot{background:var(--navy)}
@media(max-width:720px){
  .gx-flow{grid-template-columns:minmax(0,1fr);gap:22px}
  .gx-flow::before{left:27px;right:auto;top:28px;bottom:28px;width:1.5px;height:auto;background:linear-gradient(180deg,var(--navy),rgba(123,105,68,.3))}
  .gx-node{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;text-align:left;align-items:center}
  .gx-dot{grid-row:1/3;margin:0}
  .gx-node b{margin-top:0}
  .gx-node>span:not(.gx-dot){margin-top:2px}
}

/* reference cards: a small first-screen preview of another studio's site (credited in the section intro, linked in the card) */
.gx-ref-shot{margin:0 0 22px;aspect-ratio:16/10;overflow:hidden;background:#e9e7e2;box-shadow:0 0 0 1px var(--line)}
.gx-ref-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}