/* ============================================================
  © 2026 WIN TUN NAING — All Rights Reserved
  Website : www.madderquill.com
  Contact : hello@madderquill.com

  This XML template is the exclusive intellectual property of
  Win Tun Naing. Unauthorized copying, modification, distribution
  or use of this file, in whole or in part, is strictly prohibited
  without prior written permission from the author.

  Protected by copyright law. All design, code and content
  within this file belong to Win Tun Naing.
  ============================================================ */
/* Madderquill — Portable site v1.0 · styles = Blogger theme v2.2 <b:skin>, unchanged design.
   Fonts are files in /assets/fonts (SIL Open Font License) — no Google Fonts. */
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/fraunces-opsz-400.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/geist-latin-400-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:'Geist'; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/geist-latin-500-normal.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* =====================================================================
   Madderquill — Option A · Paper & Ink
   ===================================================================== */
/* Fallback faces sized to match Fraunces / Geist, so the font swap does not shift the layout (CLS) */
@font-face{ font-family:'Fraunces Fallback'; src:local('Georgia'), local('Times New Roman'); size-adjust:101%; ascent-override:96%; descent-override:25%; line-gap-override:0%; }
@font-face{ font-family:'Geist Fallback'; src:local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust:105%; ascent-override:95%; descent-override:28%; line-gap-override:0%; }
:root{
  --paper:#F4EEE3; --ink:#2B221D; --muted:#6F645B; --line:#D6CABA;
  --madder:#9A2A2A; --panel:#FAF6EE; --panel-2:#EFE6D8; --dock:#FBF7F0;
  --serif:'Fraunces', 'Fraunces Fallback', Georgia, 'Times New Roman', serif;
  --sans:'Geist', 'Geist Fallback', Arial, sans-serif;
  --wrap:1440px; --r:12px;
  --dock-h:56px; --dock-gap:16px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, input, select, textarea{ font:inherit; color:inherit; }
h1, h2, h3{ font-family:var(--serif); font-weight:400; line-height:1.12; }
:focus-visible{ outline:2px solid var(--madder); outline-offset:3px; border-radius:6px; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; left:16px; top:-60px; z-index:300; background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:999px; transition:top .2s; }
.skip:focus{ top:16px; }
main{ flex:1 0 auto; padding-bottom:calc(var(--dock-h) + var(--dock-gap) + 24px); }


/* ---------- Signature: tapered stroke, ink divider, ink links ---------- */
.page-head{ text-align:center; padding:88px 0 56px; }
.page-head h1{ font-size:88px; letter-spacing:-.01em; }
.page-head .lead{ color:var(--muted); font-size:18px; margin-top:22px; }
.page-head .kicker{ color:var(--muted); font-size:15px; margin-bottom:10px; }
.stroke{ display:block; width:200px; height:14px; margin:14px auto 0; color:var(--madder); }
.stroke path{ fill:currentColor; }
.stroke-draw{ animation:mq-draw .6s ease-out both .1s; }
@keyframes mq-draw{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
.divider{ display:block; width:100%; height:10px; color:var(--ink); opacity:.75; }
.divider path{ fill:none; stroke:currentColor; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.ink-link{ background-image:linear-gradient(var(--madder),var(--madder)); background-size:0 1.5px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:2px; transition:background-size .35s ease; }
.ink-link:hover, .ink-link:focus-visible{ background-size:100% 1.5px; }
.ink-link.is-under{ background-image:linear-gradient(var(--madder),var(--madder)); background-size:100% 1.5px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border:0; border-radius:999px; background:var(--ink); color:var(--paper); font-size:16px; font-weight:500; cursor:pointer; transition:background .2s; }
.btn:hover{ background:#43362E; }
.btn[disabled]{ opacity:.6; cursor:progress; }

/* ---------- Dock (Windows 11 style, bottom centre) ---------- */
.dock{ position:fixed; left:50%; bottom:var(--dock-gap); transform:translateX(-50%); z-index:100; display:flex; align-items:center; gap:4px; height:var(--dock-h); padding:0 8px; background:var(--dock); border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 28px -10px rgba(43,34,29,.28); }
.dock a{ position:relative; display:flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 16px; border-radius:10px; font-size:16px; color:var(--muted); transition:background .2s, color .2s; }
.dock a:hover{ background:var(--panel-2); color:var(--ink); }
.dock a.is-active{ color:var(--ink); font-weight:500; }
.dock a .mark{ position:absolute; left:50%; bottom:5px; width:24px; height:5px; transform:translateX(-50%); color:var(--madder); display:none; }
.dock a.is-active .mark{ display:block; }
.dock .home{ padding:0 12px; }
.dock .home img{ display:block; width:24px; height:24px; }

/* ---------- Footer bar (desktop: one line) ---------- */
.foot{ border-top:1px solid var(--line); }
.foot .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:calc(var(--dock-h) + var(--dock-gap) * 2); max-width:none; padding:0 36px; }
.foot small{ font-size:14px; color:var(--muted); }
.social{ display:flex; gap:4px; }
.social a{ position:relative; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; color:var(--ink); transition:background .2s; }
.social a:hover{ background:var(--panel-2); }
.social svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.social a[hidden]{ display:none; }   /* LinkedIn stays hidden until MADDERQUILL SETTINGS has the company page */

/* ---------- Home ---------- */
.home-main{ position:relative; flex:1 0 auto; display:flex; align-items:center; justify-content:center; min-height:calc(100vh - (var(--dock-h) + var(--dock-gap) * 2) - 1px); padding:0; overflow:hidden; }
#ink-lines{ position:absolute; inset:0; width:100%; height:100%; }
.grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .11 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.home-mark{ position:relative; z-index:1; text-align:center; padding:26px 36px 30px; }
.home-mark .mark{ display:block; width:96px; height:96px; margin:0 auto 10px; }
.home-mark h1{ font-size:64px; letter-spacing:-.005em; }

/* ---------- Sections (Work) ---------- */
.sec{ padding-top:8px; }
.sec + .sec{ margin-top:40px; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:34px 0 22px; }
.sec-head h2{ font-size:40px; }
.sec-head a{ font-size:15px; color:var(--muted); white-space:nowrap; min-height:44px; display:inline-flex; align-items:center; }
.sec-head a b{ color:var(--ink); font-weight:500; margin-left:4px; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px; }

/* ---------- Project card ---------- */
.card{ display:block; }
.card .media{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--panel-2); }
.card .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card .cap{ padding-top:14px; }
.card .name{ display:block; font-size:17px; font-weight:500; line-height:1.35; }
.card .type{ display:block; font-size:14px; color:var(--muted); margin-top:2px; }
.tag{ position:absolute; left:12px; bottom:12px; z-index:2; font-size:13px; line-height:1; padding:6px 9px; border-radius:6px; background:var(--panel); color:var(--ink); }
.tag + .tag{ left:auto; right:12px; }
/* Second image on hover: Web Design = desktop page that scrolls slowly · Brand Identity = presentation cover.
   Only on devices with a mouse — phones always show the cover. */
.card .media img.alt{ opacity:0; transition:opacity .45s ease; }
.card--web .media img.alt{ object-position:50% 0; transition:opacity .45s ease, object-position 7s ease-in-out .3s; }
@media (hover:hover){
  .card:hover .name{ color:var(--madder); }
  .card:hover .media img.alt, .card:focus-visible .media img.alt{ opacity:1; }
  .card--web:hover .media img.alt{ object-position:50% 100%; }
  /* Logo Design: the cover redraws like a quill stroke */
  .card--logo:hover .media img.cover{ animation:mq-redraw 1.1s ease-in-out; }
}
/* Mobile: dots under each service row (one project per screen) */
.dots{ display:none; justify-content:center; gap:2px; margin-top:6px; }
.dots button{ width:28px; height:28px; border:0; background:none; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.dots button::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .2s, transform .2s; }
.dots button[aria-current='true']::before{ background:var(--ink); transform:scale(1.15); }
@keyframes mq-redraw{ 0%{ clip-path:inset(0 100% 0 0); } 100%{ clip-path:inset(0 0 0 0); } }
/* Space kept while the projects load, so the page does not jump (CLS) */
.skeleton .media{ background:linear-gradient(90deg,var(--panel-2),var(--panel),var(--panel-2)); background-size:200% 100%; animation:mq-shine 1.4s linear infinite; }
.skeleton .cap span{ display:block; height:14px; width:55%; margin-top:6px; border-radius:4px; background:var(--panel-2); }
.skeleton .cap span + span{ width:35%; }
@keyframes mq-shine{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.sk-head{ height:44px; width:38%; margin:34px 0 22px; border-radius:8px; background:var(--panel-2); }
.state{ text-align:center; color:var(--muted); padding:40px 0; }

/* ---------- All (category) ---------- */
.all-count{ color:var(--muted); font-size:18px; margin-top:22px; }

/* ---------- Project page ---------- */
.cs-hero{ background:var(--cs-bg, var(--panel-2)); color:var(--cs-ink, var(--ink)); padding-top:72px; text-align:center; }
.cs-hero .kicker{ font-size:15px; opacity:.8; }
.cs-hero .kicker a:hover{ text-decoration:underline; }
.cs-hero h1{ font-family:var(--cs-font, var(--serif)); font-size:88px; margin:14px 0 18px; }
.cs-hero .sub{ font-size:18px; opacity:.85; }
.cs-hero .sub:empty{ display:none; }
.cs-main{ width:calc(100% - 80px); max-width:1760px; margin:48px auto 0; border-radius:var(--r) var(--r) 0 0; overflow:hidden; background:rgba(43,34,29,.12); }
.cs-main:empty{ display:none; }
.cs-main img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; }
.cs-hero.no-main{ padding-bottom:64px; }
.cs-body{ max-width:760px; margin:0 auto; padding:64px 40px 24px; text-align:center; font-size:18px; }
.cs-body h2{ font-size:36px; margin:56px 0 14px; }
.cs-body > h2:first-child, .cs-body > .mq-meta + h2, .cs-body > .mq-intro + h2{ margin-top:0; }
.cs-hero .intro{ max-width:640px; margin:18px auto 0; font-size:18px; opacity:.9; }
.mq-intro{ display:none; }
.mq-swatches{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:22px 26px; margin:22px 0 8px; }
.mq-swatches li{ width:112px; font-size:14px; line-height:1.35; }
.mq-swatches li span{ display:block; width:72px; height:72px; margin:0 auto 10px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(43,34,29,.14); }
.mq-swatches b{ display:block; font-weight:500; }
.mq-swatches code{ font-family:var(--sans); color:var(--muted); font-size:13px; }
.mq-type{ list-style:none; margin:16px 0 6px; }
.mq-type li{ margin-bottom:12px; }
.mq-type b{ font-weight:500; }
.cs-body .mq-pages{ color:var(--muted); font-size:16px; }
.cs-body .credit{ margin-top:56px; color:var(--muted); font-size:16px; }
.cs-end{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px 28px; margin-top:28px; padding-top:28px; border-top:1px solid var(--line); }
.cs-body .cs-end .btn{ color:var(--paper); text-decoration:none; }
.cs-body p{ margin-bottom:14px; }
.cs-body a{ color:var(--madder); text-decoration:underline; text-underline-offset:3px; }
.cs-body blockquote{ font-family:var(--serif); font-size:26px; line-height:1.35; margin:40px 0; }
.mq-meta{ display:none; }
.cs-body .separator, .cs-body .separator a{ display:block; margin:0 !important; }
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:28px; width:calc(100vw - 80px); max-width:1760px; position:relative; left:50%; transform:translateX(-50%); margin:48px 0; text-align:left; }
.gallery figure{ margin:0; }
.gallery .ph{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--panel-2); cursor:zoom-in; }
.gallery .ph img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery .ph:hover img{ transform:scale(1.02); }
.gallery figure.solo{ grid-column:1 / -1; }
.gallery figure.solo .ph{ aspect-ratio:16/10; }
.gallery figure.logo img{ object-fit:contain; }
/* Web Design: full-length pages inside a browser frame that scrolls */
.frames{ display:grid; gap:40px; width:calc(100vw - 80px); max-width:1440px; position:relative; left:50%; transform:translateX(-50%); margin:40px 0; text-align:left; }
.frame{ border-radius:var(--r); overflow:hidden; background:#fff; box-shadow:0 18px 50px -22px rgba(43,34,29,.35); border:1px solid var(--line); }
.frame .bar{ display:flex; gap:6px; align-items:center; height:34px; padding:0 14px; background:var(--panel-2); border-bottom:1px solid var(--line); }
.frame .bar i{ width:10px; height:10px; border-radius:50%; background:#D6CABA; }
.frame .scroll{ height:720px; max-height:72vh; overflow-y:auto; overscroll-behavior:contain; }
.frame .scroll img{ width:100%; height:auto; }
.frame-cap{ font-size:14px; color:var(--muted); margin-top:10px; text-align:center; }
.phones{ display:flex; justify-content:center; gap:32px; width:calc(100vw - 80px); max-width:1440px; position:relative; left:50%; transform:translateX(-50%); margin:40px 0; }
.phone{ flex:0 1 300px; }
.phone .body{ border:10px solid #2B221D; border-radius:36px; overflow:hidden; background:#fff; }
.phone .scroll{ height:600px; max-height:70vh; overflow-y:auto; overscroll-behavior:contain; }
.phone .scroll img{ width:100%; height:auto; }
.gallery figcaption{ padding-top:10px; font-size:14px; line-height:1.4; color:var(--muted); }
.gallery button{ position:absolute; inset:0; border:0; background:none; cursor:zoom-in; }

/* ---------- Lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:400; background:rgba(28,22,19,.93); display:none; align-items:center; justify-content:center; flex-direction:column; padding:56px 20px 28px; touch-action:pan-y; }
.lb.open{ display:flex; }
.lb{ cursor:zoom-out; }
.lb.c-prev{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='19' fill='%23F4EEE3' fill-opacity='.94'/><path d='M23 12l-8 8 8 8' fill='none' stroke='%232B221D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") 20 20, w-resize; }
.lb.c-next{ cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='19' fill='%23F4EEE3' fill-opacity='.94'/><path d='M17 12l8 8-8 8' fill='none' stroke='%232B221D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") 20 20, e-resize; }
.lb figure{ display:flex; flex-direction:column; align-items:center; max-width:min(1600px, 100%); margin:0; }
.lb img{ max-width:100%; max-height:calc(100vh - 170px); max-height:calc(100dvh - 170px); width:auto; height:auto; border-radius:var(--r); box-shadow:0 30px 80px rgba(0,0,0,.4); }
.lb.on-paper figure img{ background:var(--lb-paper, transparent); }
.lb figcaption{ margin-top:14px; font-size:15px; line-height:1.4; color:#E8DFD2; text-align:center; }
.lb .count{ color:#BFB3A3; font-size:14px; letter-spacing:.12em; margin-top:8px; text-align:center; font-variant-numeric:tabular-nums; }
.lb .close{ position:absolute; top:18px; right:22px; width:48px; height:48px; border:0; border-radius:10px; background:none; color:#fff; cursor:pointer; }
.lb .close:hover{ background:rgba(255,255,255,.1); }
.lb .close svg{ width:26px; height:26px; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

/* ---------- About ---------- */
.about-top{ display:grid; grid-template-columns:5fr 7fr; gap:64px; align-items:center; }
.photo{ position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--paper); }
.photo img{ width:100%; height:100%; object-fit:cover; }
.about-top h2{ font-size:40px; margin-bottom:22px; }
.about-top .intro{ font-size:18px; margin-bottom:34px; }
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.principles b{ display:block; font-weight:500; font-size:16px; margin-bottom:6px; }
.principles span{ display:block; color:var(--muted); font-size:15px; line-height:1.5; }
.why{ text-align:center; max-width:620px; margin:0 auto; padding:56px 0; }
.why img{ display:block; width:64px; height:64px; margin:0 auto 14px; }
.why h2{ font-size:40px; margin-bottom:16px; }
.why p{ font-size:18px; }
.prices-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:48px 0 20px; }
.prices-head h2{ font-size:40px; }
.prices-head small{ color:var(--muted); font-size:15px; }
.prices{ border-top:1px solid var(--line); }
.prices li{ list-style:none; display:grid; grid-template-columns:4fr 7fr 3fr; gap:24px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
.prices h3{ font-size:32px; }
.prices p{ font-size:16px; }
.prices p small{ display:block; color:var(--muted); font-size:14px; margin-top:4px; }
.prices .from{ text-align:right; font-size:15px; color:var(--muted); white-space:nowrap; }
.prices .from b{ font-family:var(--serif); font-weight:400; font-size:34px; color:var(--ink); margin-left:6px; }
.custom{ margin-top:26px; color:var(--muted); font-size:16px; }
.custom a{ color:var(--ink); }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
.form-card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:36px 32px; }
.form-card h2{ font-size:30px; margin-bottom:22px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label, .field legend{ display:block; font-size:15px; font-weight:500; margin-bottom:8px; }
.field input[type=text], .field input[type=email], .field select, .field textarea{ width:100%; min-height:48px; padding:11px 14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; font-size:16px; }
.field textarea{ min-height:140px; resize:vertical; }
.field select{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%236F645B' stroke-width='1.5'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--madder); outline-offset:1px; border-color:transparent; }
.field ::placeholder{ color:#8E8278; }
fieldset.field{ border:0; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips label{ position:relative; margin:0; }
.chips input{ position:absolute; opacity:0; width:1px; height:1px; }
.chips span{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line); border-radius:999px; background:var(--panel); font-size:15px; font-weight:400; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.chips span:hover{ border-color:var(--muted); }
.chips input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chips input:focus-visible + span{ outline:2px solid var(--madder); outline-offset:2px; }
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; }
.form-foot small{ color:var(--muted); font-size:14px; }
.form-msg{ margin-top:16px; font-size:15px; padding:14px 16px; border-radius:10px; display:none; }
.form-msg.ok{ display:block; background:#E7EFE4; color:#24412B; }
.form-msg.err{ display:block; background:#F5E1DE; color:#6E1E1E; }
.req{ color:var(--madder); }
.how h2{ font-size:30px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.how ol{ list-style:none; }
.how li{ display:grid; grid-template-columns:36px 1fr; gap:8px; padding:18px 0; border-bottom:1px solid var(--line); }
.how li > span{ font-family:var(--serif); font-size:26px; color:var(--madder); line-height:1; }
.how b{ display:block; font-weight:500; }
.how p{ color:var(--muted); font-size:15px; }
.how small{ display:block; font-size:14px; margin-top:4px; }
.faq{ display:grid; grid-template-columns:1fr 1.7fr; gap:48px; margin-top:40px; }
.faq h2{ font-size:40px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; min-height:56px; padding:14px 0; font-size:18px; font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-size:22px; color:var(--muted); font-weight:400; }
.faq details[open] summary::after{ content:'\2212'; }
.faq details p{ color:var(--muted); padding:0 32px 20px 0; font-size:16px; }
.note{ margin-top:30px; background:var(--panel-2); border-radius:14px; padding:18px 20px; }
.note b{ display:block; font-weight:500; margin-bottom:4px; }
.note p{ color:var(--muted); font-size:15px; }

/* ---------- 404 ---------- */
.err{ text-align:center; padding:120px 20px 60px; }
.err svg{ width:130px; height:120px; margin:0 auto 34px; }
.err h1{ font-size:72px; }
.err p{ color:var(--muted); font-size:18px; margin:18px 0 30px; }
.err .links{ display:flex; gap:34px; justify-content:center; font-size:18px; }

/* ---------- Plain page / fallback list ---------- */
.plain{ max-width:760px; margin:0 auto; padding:0 40px; font-size:18px; }
.plain p{ margin-bottom:16px; }
.plain a{ color:var(--madder); text-decoration:underline; }

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .card--web:hover .media img.alt{ object-position:50% 0; }
}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .wrap{ padding:0 28px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .about-top{ gap:40px; }
  .principles{ grid-template-columns:1fr; gap:14px; }
  .contact-grid, .faq{ grid-template-columns:1fr; gap:40px; }
  .phones{ gap:18px; }
  .prices li{ grid-template-columns:1fr auto; }
  .prices li p{ grid-column:1 / -1; grid-row:2; }
}

/* ---------- Mobile (the only 768px block) ---------- */
@media (max-width:768px){
  body{ font-size:16.5px; }
  .wrap{ padding:0 20px; }
  .page-head{ padding:64px 0 36px; }
  .page-head h1, .cs-hero h1{ font-size:52px; }
  .stroke{ width:170px; }
  .home-mark h1{ font-size:48px; }
  .home-mark .mark{ width:80px; height:80px; }
  .home-main{ min-height:calc(100vh - 190px); min-height:calc(100svh - 190px); }
  .cs-main img{ aspect-ratio:4/3; }
  .frames{ width:calc(100vw - 32px); gap:28px; }
  .frame .scroll{ height:520px; }
  .phones{ width:100vw; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 20px 8px; gap:16px; scrollbar-width:none; }
  .phones::-webkit-scrollbar{ display:none; }
  .phone{ flex:0 0 72%; scroll-snap-align:center; }
  .phone .scroll{ height:480px; }
  .mq-swatches li{ width:96px; }
  .sec-head h2, .about-top h2, .why h2, .prices-head h2, .faq h2{ font-size:28px; }
  .prices h3{ font-size:26px; }
  .grid{ grid-template-columns:1fr; }
  .rows .grid{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 0 4px; scrollbar-width:none; }
  .rows .grid::-webkit-scrollbar{ display:none; }
  .rows .card{ flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always; }
  .dots{ display:flex; }
  .about-top{ grid-template-columns:1fr; }
  .prices-head{ flex-direction:column; gap:6px; }
  .row2{ grid-template-columns:1fr; gap:0; }
  .form-card{ padding:26px 20px; }
  .form-foot{ flex-direction:column-reverse; align-items:stretch; }
  .form-foot .btn{ width:100%; }
  .cs-hero{ padding-top:56px; }
  .cs-main{ width:calc(100% - 32px); margin-top:32px; }
  .cs-body{ padding:48px 20px 16px; font-size:17px; }
  .cs-body h2{ font-size:28px; }
  .gallery{ grid-template-columns:1fr; gap:20px; width:calc(100vw - 32px); }
  .gallery figure.solo .ph{ aspect-ratio:4/3; }
  .err{ padding-top:80px; }
  .err h1{ font-size:40px; }
  /* Dock becomes a full-width bar; © and icons move to the page end */
  .dock{ left:12px; right:12px; bottom:12px; transform:none; justify-content:space-around; padding:0 6px; height:60px; }
  .dock a{ flex:1; padding:0 6px; }
  .foot{ border-top:1px solid var(--line); }
  .foot .wrap{ flex-direction:column-reverse; justify-content:center; gap:10px; min-height:0; padding:24px 20px calc(60px + 12px + 24px); }
  .lb{ padding:64px 10px 24px; }
}