/* ==========================================================================
   Zando Yapı — "Taş" (stone)

   A builder's site, not a product page: serif headings, squared edges, warm
   paper and stone grounds, a solid header and footer in the logo's indigo and
   bordo (claret) kept for rules and emphasis. Photographs carry the pages; the
   architectural line drawing (img/icerik/hero.jpg) is the one recurring motif.

   Part one is the system (type, layout, header, buttons, tiles). Part two is
   the content blocks the panel fills (hero, cards, prose, gallery, forms).
   Class names are the ones the templates and the panel's HTML fields use, so
   bodies typed into the panel keep working.
   ========================================================================== */

:root{
  /* Logo palette */
  --primary:#261B6A;
  --primary-d:#17103F;
  --primary-l:#ECEAF4;
  --primary-l2:#D9D5EA;
  --accent:#861F41;
  --accent-d:#6A1733;
  --accent-l:#F6EAEE;
  --accent-l2:#EBD0D9;
  /* Success and WhatsApp keep their own green: bordo must never read as "done". */
  --ok:#1F7A4C; --ok-l:#E5F2EA; --wa:#25D366;

  /* Grounds and text — warm, like paper and cut stone */
  --paper:#F8F5EF;
  --stone:#EFEAE0;
  --white:#FFFFFF;
  --canvas:var(--paper);
  --ink:#1D1A2B;
  --ink-2:#34303F;
  --body:#514D58;
  --muted:#827D88;
  --line:#DED7C9;
  --line-2:#EAE4D8;

  --r:3px;
  --shadow-s:0 1px 2px rgba(29,26,43,.05),0 3px 10px rgba(29,26,43,.05);
  --shadow:0 2px 6px rgba(29,26,43,.06),0 16px 36px rgba(29,26,43,.10);
  --shadow-l:0 10px 24px rgba(29,26,43,.10),0 30px 70px rgba(29,26,43,.16);
  --maxw:1240px;
  --pad:clamp(18px,3.6vw,44px);
  --navh:104px;                                /* header bar */
  --tp:clamp(22px,2.2vw,30px);                 /* tile padding */
  --drawing:url(../img/icerik/hero.jpg);

  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* The page scrolls up and down only. `clip` (unlike `hidden`) does not turn
   the element into a scroll container, so the sticky header keeps working. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--body);
  font-family:var(--sans);font-size:16.5px;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;max-width:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--accent)}
h1,h2,h3,h4{margin:0;color:var(--ink);font-family:var(--display);font-weight:600;line-height:1.16;letter-spacing:-.005em;
  text-wrap:balance}
h1{font-size:clamp(2.2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.7rem,3vw,2.5rem)}
h3{font-size:clamp(1.14rem,1.5vw,1.34rem)}
h4{font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:0}
p{margin:0 0 1.1em}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:clamp(48px,6.4vw,92px)}
.sec--top{padding-top:clamp(28px,3.4vw,48px)}
.sec--alt{background:var(--white);border-block:1px solid var(--line-2)}
.sec--stone{background:var(--stone)}
.lead{font-size:clamp(1.03rem,1.35vw,1.16rem);color:var(--ink-2);line-height:1.7}
.dim{color:var(--muted)}

/* ---------- Eyebrow: a short bordo rule and small capitals ---------- */
.eb{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.eb::before{content:"";width:34px;height:2px;background:var(--accent);flex:none}
.eb--primary{color:var(--primary)}
.eb--primary::before{background:var(--primary)}

/* ---------- Section head ---------- */
.shead{max-width:680px;margin-bottom:clamp(28px,3.4vw,46px)}
.shead h2{margin-bottom:12px}
.shead p{margin-bottom:0;color:var(--body)}
.shead-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  margin-bottom:clamp(28px,3.4vw,46px);padding-bottom:22px;border-bottom:1px solid var(--line)}
.shead-row .shead{margin-bottom:0}

/* ---------- Header ----------
   As on the firm's current site: a dark bar, the logo large on a white plate
   at its left end, and the menu to the right with a hairline over each entry. */
.topnav{position:sticky;top:0;z-index:80;background:#100B2E;transition:box-shadow .25s ease}
.topnav.stuck{box-shadow:0 8px 28px rgba(8,5,26,.35)}
.topnav > .wrap{max-width:none;padding-left:0}
.nav-in{display:flex;align-items:center;gap:26px;height:var(--navh)}
/* The plate hangs a little below the bar, over whatever comes next. */
.logo{display:flex;align-items:center;justify-content:center;flex:none;align-self:flex-start;background:var(--white);
  height:calc(var(--navh) + 14px);padding:6px clamp(20px,3.2vw,50px) 8px;border-radius:0 0 30px 0;
  border:5px solid #100B2E;                    /* the bar's own colour, framing the plate */
  box-shadow:0 6px 20px rgba(8,5,26,.22);position:relative;z-index:2}
.logo img{height:100%;width:auto}

.menu{display:flex;align-items:stretch;gap:8px;margin-left:auto;align-self:stretch}
.menu > li{position:relative;display:flex}
.menu > li > a{display:flex;align-items:center;gap:7px;padding:14px 12px 0;font-size:.84rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);position:relative}
/* The hairline over each entry; it thickens and turns bordo on the current one. */
.menu > li > a::before{content:"";position:absolute;left:0;right:0;top:calc(50% - 20px);height:1px;background:rgba(255,255,255,.4);
  transition:height .2s ease,background .2s ease}
.menu > li > a:hover,.menu > li.open > a{color:#fff}
.menu > li:hover > a::before,.menu > li.cur > a::before{height:3px;background:#C75A7C}
.menu > li.cur > a{color:#fff}
.menu .cv{width:9px;height:9px;opacity:.6;transition:transform .22s ease}
.menu > li.open .cv{transform:rotate(180deg)}

.drop{position:absolute;top:calc(50% + 28px);left:0;min-width:280px;background:var(--white);border:1px solid var(--line);
  border-top:3px solid var(--accent);padding:8px;box-shadow:var(--shadow-l);opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity .2s ease,transform .22s ease,visibility .22s}
.menu > li:hover .drop,.menu > li.open .drop{opacity:1;visibility:visible;transform:none}
.drop::before{content:"";position:absolute;left:0;right:0;top:-34px;height:34px}
.drop a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;font-size:.92rem;font-weight:600;
  color:var(--ink);border-left:2px solid transparent;transition:background .16s ease,border-color .16s ease,color .16s ease}
.drop a small{font-weight:400;font-size:.8rem;color:var(--muted)}
.drop a:hover{background:var(--paper);border-left-color:var(--accent);color:var(--accent)}
/* Only the mobile menu needs this: there the parent is a toggle, not a link. */
.drop a.drop-all{display:none}
.drop .glabel{display:block;padding:12px 14px 5px;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}

.nav-cta{display:flex;align-items:center;gap:10px;flex:none}
.nav-tools{display:flex;align-items:center;gap:8px;flex:none}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.3);flex:none}
.lang a{padding:6px 10px;font-size:.74rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.lang a:hover{color:#fff}
.lang a.on{background:#fff;color:var(--primary-d)}
.iconbtn{width:42px;height:42px;flex:none;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease}
.iconbtn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.iconbtn svg{width:17px;height:17px}
.topnav .iconbtn{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.topnav .iconbtn:hover{background:#fff;border-color:#fff;color:var(--primary-d)}
.mbtn{display:none;width:46px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r);background:transparent;
  cursor:pointer;place-items:center;color:#fff}
.mbtn i{display:block;width:18px;height:12px;position:relative}
.mbtn i::before,.mbtn i::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;
  transition:transform .26s ease}
.mbtn i::before{top:0}
.mbtn i::after{bottom:0}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);
  font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;padding:15px 26px;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn svg{width:15px;height:15px;transition:transform .2s ease}
.btn:hover svg{transform:translateX(3px)}
.b-primary{background:var(--primary);color:#fff}
.b-primary:hover{background:var(--primary-d);color:#fff}
.b-accent{background:var(--accent);color:#fff}
.b-accent:hover{background:var(--accent-d);color:#fff}
.b-white{background:var(--white);color:var(--ink);border-color:var(--ink)}
.b-white:hover{background:var(--ink);color:#fff}
.b-soft{background:transparent;color:var(--primary);border-color:var(--primary-l2)}
.b-soft:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.b-wa{background:var(--wa);color:#fff}
.b-wa:hover{background:#1EBE5A;color:#fff}
.b-wa:hover svg{transform:none}
.b-sm{padding:11px 18px;font-size:.74rem}
/* File type on a download button (PDF, ZIP…) */
.dl-ext{font-size:.66rem;font-weight:700;letter-spacing:.06em;padding:2px 6px;border:1px solid currentColor;opacity:.75}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Grid of tiles ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,1.8vw,26px)}
.t3{grid-column:span 3}.t4{grid-column:span 4}.t5{grid-column:span 5}
.t6{grid-column:span 6}.t7{grid-column:span 7}.t8{grid-column:span 8}
.t9{grid-column:span 9}.t12{grid-column:span 12}

.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:var(--tp);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .26s ease,border-color .26s ease,transform .26s ease}
/* A bordo rule draws across the top of a tile that is a link. */
a.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);z-index:2;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
a.tile:hover{box-shadow:var(--shadow);border-color:var(--line);color:inherit}
a.tile:hover::before{transform:scaleX(1)}
a.tile{color:var(--body)}
.tile h3{margin-bottom:9px}
.tile p{font-size:.95rem;margin-bottom:0}
/* A tile is a flex column, which would stretch a label to the full width. */
.tile > .eb,.tile > .badge--inline,.tile > .chip{align-self:flex-start}
.tile--primary{background:var(--stone);border-color:var(--line)}
.tile--accent{background:var(--accent-l);border-color:var(--accent-l2)}
.tile--deep{background:var(--primary-d);border-color:transparent;color:rgba(255,255,255,.82)}
.tile--deep h2,.tile--deep h3{color:#fff}
.tile--deep p{color:rgba(255,255,255,.82)}
.tile--pad0{padding:0}
.tile--center{align-items:center;text-align:center}
.tile--row{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.tile--img{padding:0;min-height:340px;border:0}
.tile--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.tnum{font-family:var(--display);font-size:.9rem;color:var(--muted);margin-bottom:auto}
.tico{width:54px;height:54px;border:1px solid var(--primary-l2);border-radius:var(--r);display:grid;place-items:center;
  margin-bottom:20px;color:var(--primary);transition:background .25s ease,color .25s ease,border-color .25s ease}
.tico svg{width:25px;height:25px;stroke-width:1.5}
.tico--g{color:var(--accent);border-color:var(--accent-l2)}
a.tile:hover .tico{background:var(--primary);border-color:var(--primary);color:#fff}
a.tile:hover .tico--g{background:var(--accent);border-color:var(--accent)}
.tgo{margin-top:18px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:8px}
.tgo svg{width:14px;height:14px;transition:transform .2s ease}
a.tile:hover .tgo svg{transform:translateX(5px)}

/* ==========================================================================
   PART TWO — Content blocks
   ========================================================================== */

/* ---------- Hero ----------
   Split: the statement on a deep indigo block, the photograph beside it at
   full height. The photo is cropped to fill, so upright building shots work
   as well as wide ones. */
.hero{position:relative;background:var(--primary-d)}
.hero-in{position:relative}
/* Header + hero = one screen: on arrival the hero's foot sits on the bottom
   edge of the window. (svh, so mobile browser bars do not push it under.) */
.hsplit{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  min-height:max(500px,calc(100vh - var(--navh)));min-height:max(500px,calc(100svh - var(--navh)))}
.hsplit--solo{grid-template-columns:1fr}
/* Two further layouts, chosen per hero in the panel (Kapak → Düzen):
   "full"  — the picture fills the hero, the words sit over its left side;
   "image" — the picture alone. */
.hsplit--full,.hsplit--image{grid-template-columns:1fr;position:relative}
.hsplit--full .hs-img,.hsplit--image .hs-img{position:absolute;inset:0;min-height:0}
.hsplit--full .hs-img img,.hsplit--image .hs-img img{object-position:center}
.hsplit--full .hs-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(16,11,46,.9) 0%,rgba(16,11,46,.66) 38%,rgba(16,11,46,.12) 72%,rgba(16,11,46,0) 100%)}
.hsplit--full .hs-text{z-index:1;max-width:min(100%,860px)}
.hsplit--full .hs-text::before{display:none}
.hsplit--image a.hs-img{display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hs-text{position:relative;display:flex;flex-direction:column;justify-content:center;color:rgba(255,255,255,.84);
  padding:clamp(44px,6vw,90px) clamp(24px,5vw,72px) clamp(54px,6vw,90px)
          max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));overflow:hidden}
/* The line drawing, turned white, faint behind the words. */
.hs-text::before{content:"";position:absolute;inset:0;background:var(--drawing) right bottom / 120% auto no-repeat;
  filter:invert(1);mix-blend-mode:screen;opacity:.09;pointer-events:none}
.hs-text > *{position:relative}
.hs-text .eb{color:#fff;opacity:.9}
.hs-text .eb::before{background:var(--accent);height:3px}
.hero h1,.hero-h{color:#fff;margin-bottom:22px;max-width:15ch;font-size:clamp(2.4rem,5vw,4.1rem);font-weight:500;line-height:1.08}
.hero-h .g{font-style:italic;color:#fff;display:inline-block;border-bottom:3px solid var(--accent);padding-bottom:2px}
.hero-sub{max-width:52ch;font-size:clamp(1.02rem,1.3vw,1.14rem);color:rgba(255,255,255,.8);margin-bottom:0}
.hs-text .btns{margin-top:32px}
.hs-text .b-primary{background:var(--accent)}
.hs-text .b-primary:hover{background:#9C2A4E}
.hs-text .b-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.hs-text .b-white:hover{background:#fff;color:var(--primary-d);border-color:#fff}
.hs-img{position:relative;min-height:320px;background:var(--primary)}
.hs-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
/* The small panel of figures, pinned over the foot of the photo. */
.hs-panel{margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.2);max-width:560px}
.hs-panel h3{color:#fff;margin-bottom:8px}
.hs-panel p{font-size:.95rem;color:rgba(255,255,255,.76);margin:0}
.hs-panel .eb{margin-bottom:10px}
.hs-stats{display:flex;flex-wrap:wrap;gap:14px 38px;margin-top:20px}
.mini{display:flex;flex-direction:column;justify-content:center;gap:6px}
.mini b{font-family:var(--display);font-size:clamp(1.9rem,3vw,2.7rem);font-weight:500;color:var(--primary);line-height:1}
.mini span{font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.hs-stats .mini b{color:#fff;font-size:clamp(1.5rem,2.2vw,2rem)}
.hs-stats .mini span{color:rgba(255,255,255,.66)}

/* Several heroes: a strip that snaps to one hero at a time. Scrolling it is
   the swipe; site.js adds the arrows, the dots and dragging with a mouse. */
.hslides{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;transition:height .35s cubic-bezier(.2,.7,.3,1)}
.hslides::-webkit-scrollbar{display:none}
.hslide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.hslides.nosnap{scroll-snap-type:none}
.hslides.drag{cursor:grabbing;user-select:none;-webkit-user-select:none}
.hslides img{-webkit-user-drag:none}
/* The controls are one frosted capsule over the picture: arrow, the slides as
   short bars (the current one longer), arrow. */
.hnav{position:absolute;right:clamp(16px,2.6vw,36px);bottom:clamp(18px,2.6vw,34px);z-index:3;display:flex;align-items:center;
  gap:4px;padding:6px;border-radius:999px;background:rgba(16,11,46,.5);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px rgba(8,5,26,.28)}
.hnav .iconbtn{width:46px;height:46px;border:0;border-radius:50%;background:transparent;color:#fff;
  transition:background .2s ease,transform .2s ease}
.hnav .iconbtn:hover{background:#fff;color:var(--primary-d)}
.hnav .iconbtn:active{transform:scale(.94)}
.hnav .iconbtn svg{width:19px;height:19px;stroke-width:1.8}
.hdots{display:flex;align-items:center;gap:6px;padding:0 10px}
.hdots button{width:auto;height:30px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.hdots button::before{content:"";width:16px;height:3px;border-radius:3px;background:rgba(255,255,255,.4);
  transition:background .3s ease,width .3s cubic-bezier(.2,.7,.3,1)}
.hdots button:hover::before{background:rgba(255,255,255,.75)}
.hdots button.on::before{width:34px;background:#fff}

/* ---------- Announcement strip (the "Duyuru etiketleri" collection) ---------- */
.hlstrip{background:var(--white);border-bottom:1px solid var(--line)}
.hlbar{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.hlbar::-webkit-scrollbar{display:none}
.hl{flex:none;display:flex;align-items:center;padding:16px 22px;font-size:.84rem;font-weight:600;color:var(--ink);
  white-space:nowrap;border-right:1px solid var(--line-2);transition:background .2s ease,color .2s ease}
.hl:first-child{border-left:1px solid var(--line-2)}
.hl:hover{background:var(--paper);color:var(--accent)}
.hl.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.hl.on:hover{background:var(--accent-d);color:#fff}

/* ---------- Figures band ---------- */
.statband{background:var(--stone);border-bottom:1px solid var(--line)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.stat{padding:clamp(26px,3.4vw,44px) clamp(16px,2vw,30px);border-left:1px solid var(--line);text-align:center}
.stat:last-child{border-right:1px solid var(--line)}
.stat b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,3.8vw,3.3rem);line-height:1;color:var(--primary)}
.stat span{display:block;margin-top:10px;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.stat.tone-accent b{color:var(--accent)}
.stat.tone-deep{background:var(--primary-d)}
.stat.tone-deep b{color:#fff}
.stat.tone-deep span{color:rgba(255,255,255,.7)}

/* ---------- About block: the photo set in a frame ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:center}
.about--solo{grid-template-columns:1fr;max-width:820px}
.about-img{position:relative;padding:0 0 26px 26px}
.about-img::before{content:"";position:absolute;left:0;bottom:0;right:26px;top:26px;border:2px solid var(--accent)}
.about-img img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--white);box-shadow:var(--shadow)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:8px 14px;
  font-size:.84rem;font-weight:600;color:var(--ink-2);transition:border-color .2s ease,color .2s ease,background .2s ease}
a.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip--soft{background:var(--stone);border-color:var(--line);color:var(--ink)}
.chip--g{background:var(--accent-l);border-color:var(--accent-l2);color:var(--accent-d)}
a.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
a.chip.on:hover{color:#fff}

/* ---------- Checklist ---------- */
.checks li{position:relative;padding-left:30px;margin-bottom:10px;font-size:.96rem;color:var(--ink-2)}
.checks li::before{content:"";position:absolute;left:2px;top:.42em;width:7px;height:12px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checks--primary li::before{border-color:var(--primary)}
.cols2{columns:2;column-gap:clamp(22px,3vw,48px)}
.cols2 li{break-inside:avoid}

/* ---------- Cards built from content ----------
   The photo runs to the edges of the card; the text sits under it. */
.cmedia{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;background:var(--stone);flex:none;
  margin:calc(-1 * var(--tp)) calc(-1 * var(--tp)) 22px}
.cmedia--tall{aspect-ratio:4/3}
.cmedia img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
a.tile:hover .cmedia img{transform:scale(1.045)}
.cmedia--none{display:grid;place-items:center}
.cmedia--none img{width:44%;height:auto;object-fit:contain;opacity:.5}
.ndate{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.tsub{color:var(--accent);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.badge{position:absolute;top:0;left:0;z-index:1;padding:8px 14px;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;background:var(--primary);color:#fff}
.badge--accent{background:var(--accent)}
.badge--ok{background:var(--ok)}
.badge--mute{background:var(--white);color:var(--ink)}
.badge--inline{position:static;display:inline-block;margin-bottom:16px}
.badge--inline.badge--mute{border:1px solid var(--line)}
.price{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--primary);margin:2px 0 8px}
.loc{display:flex;align-items:center;gap:7px;font-size:.88rem;color:var(--muted);margin:-2px 0 10px}
.loc svg{width:14px;height:14px;flex:none;color:var(--accent)}
.facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:.85rem;font-weight:600;color:var(--ink-2)}
.facts span{display:inline-flex;align-items:center;gap:7px}
.facts svg{width:15px;height:15px;color:var(--muted)}
.tile .tgo{margin-top:16px}

/* Project card: the photograph is the card; the name is set over its foot. */
.pcard{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--primary-d);color:#fff;border-radius:var(--r)}
.pcard:hover{color:#fff}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.pcard:hover img{transform:scale(1.05)}
.pcard::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,16,63,0) 38%,rgba(23,16,63,.5) 62%,rgba(15,10,44,.94) 100%)}
.pc-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(20px,2.2vw,28px);
  border-bottom:3px solid transparent;transition:border-color .3s ease}
.pcard:hover .pc-body{border-bottom-color:var(--accent)}
.pc-body .tsub{color:rgba(255,255,255,.78);margin-bottom:6px}
.pc-body h3{color:#fff;font-size:clamp(1.2rem,1.7vw,1.5rem);margin:0}
.pc-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:.84rem;color:rgba(255,255,255,.78)}
.pc-meta span{display:inline-flex;align-items:center;gap:6px}
.pc-meta svg{width:14px;height:14px;opacity:.75}
.t6 > .pcard,.pcard.t6,.pcard.t8,.pcard.t12{aspect-ratio:16/11}
.pcard.t3{aspect-ratio:3/4}

/* ---------- Partner strip ---------- */
.pstrip{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pitem{background:var(--white);border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:112px;
  display:grid;place-items:center;padding:20px;text-align:center;color:var(--ink-2);font-weight:700;font-size:.92rem;
  transition:background .2s ease}
.pitem:hover{background:var(--paper)}
.pitem img{max-height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s ease,opacity .25s ease}
.pitem:hover img{filter:none;opacity:1}

/* ---------- Data list ---------- */
.dl{border-top:2px solid var(--ink)}
.dl > div{display:grid;grid-template-columns:minmax(160px,.42fr) 1fr;gap:14px 24px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.dl dt{font-weight:600;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.dl dd{margin:0;font-size:.98rem;color:var(--ink);font-weight:500}
.dl dd a{font-weight:600}

/* ---------- Steps ---------- */
.steps{counter-reset:s}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-2)}
.step:last-child{border-bottom:0}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--display);
  font-size:1.3rem;color:var(--accent);line-height:1.2}
.step h4{margin-bottom:6px}
.step p{margin:0;font-size:.94rem}

/* ---------- Info rows (contact) ---------- */
.info-row{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line-2)}
.info-row:first-child{padding-top:0}
.info-row:last-child{border-bottom:0;padding-bottom:0}
.info-ic{width:44px;height:44px;border:1px solid var(--primary-l2);border-radius:var(--r);display:grid;place-items:center;
  flex:none;color:var(--primary)}
.info-ic svg{width:18px;height:18px}
.info-row h4{margin:0 0 3px;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.info-row p{margin:0;font-size:1rem;line-height:1.55;word-break:break-word;color:var(--ink)}

/* ---------- Timeline (history) ---------- */
.tl{position:relative;padding-left:34px;margin:1.4em 0}
.tl::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:var(--line)}
.tlx{position:relative;margin-bottom:26px}
.tlx:last-child{margin-bottom:0}
.tlx::before{content:"";position:absolute;left:-33px;top:9px;width:9px;height:9px;background:var(--accent);
  box-shadow:0 0 0 4px var(--white)}
.tlx .yr{display:block;font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--primary);margin-bottom:4px}
.tlx p{margin:0}

/* ---------- Disclosure ---------- */
.dq{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.dq + .dq{margin-top:10px}
.dq-h{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;
  background:none;border:0;cursor:pointer;padding:20px 24px;font-family:var(--display);font-weight:600;
  font-size:1.08rem;color:var(--ink);transition:background .2s ease}
.dq-h:hover{background:var(--paper)}
.dq-s{width:28px;height:28px;flex:none;border:1px solid var(--line);color:var(--accent);display:grid;place-items:center;
  font-size:1.1rem;line-height:1;transition:transform .28s ease,background .25s ease,color .25s ease}
.dq.on .dq-s{transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:#fff}
.dq-b{display:none;padding:0 24px 24px}
.dq.on .dq-b{display:block;animation:fu .3s ease both}
@keyframes fu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:0;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;
  font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  padding:14px 20px;transition:color .2s ease,border-color .2s ease}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--primary);border-bottom-color:var(--accent)}
.pane{display:none}
.pane.on{display:block;animation:fu .34s ease both}

/* ---------- Quote ---------- */
.quote,.prose blockquote{border-left:3px solid var(--accent);background:var(--paper);padding:22px 28px;margin:1.8em 0;
  font-family:var(--display);font-size:1.2rem;font-style:italic;line-height:1.5;color:var(--ink)}
.quote p:last-child,.prose blockquote p:last-child{margin-bottom:0}

/* ---------- Page head ----------
   A stone band with the line drawing fading in from the right. */
.phead{position:relative;background:var(--stone);border-bottom:1px solid var(--line);overflow:hidden;
  padding-block:clamp(30px,4vw,56px) clamp(32px,4.4vw,60px)}
.phead::before{content:"";position:absolute;inset:0 0 0 45%;background:var(--drawing) right center / cover no-repeat;
  mix-blend-mode:multiply;opacity:.32;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.phead .wrap{position:relative}
.crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;color:var(--muted);margin-bottom:22px;
  letter-spacing:.04em}
.crumb a{color:var(--muted);font-weight:600}
.crumb a:hover{color:var(--accent)}
.phead h1{max-width:20ch;margin-bottom:14px}
.phead p{max-width:62ch;margin-bottom:0}
.phead .loc{font-size:1rem;margin:0}

/* ---------- Forms ---------- */
.fm .fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fm .fi{margin-bottom:16px}
.fm label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:8px}
.fm input,.fm select,.fm textarea{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);font-family:inherit;font-size:.98rem;color:var(--ink);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.fm textarea{min-height:140px;resize:vertical}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:0;border-color:var(--primary);background:var(--white);
  box-shadow:0 0 0 3px rgba(38,27,106,.10)}
.fnote{font-size:.82rem;color:var(--muted);margin:12px 0 0}
.fst{display:none;margin-top:14px;padding:12px 16px;background:var(--ok-l);color:var(--ok);font-size:.9rem;font-weight:600}
.fst.on{display:block}

/* ---------- Map ---------- */
.map{border:1px solid var(--line);line-height:0}
.map iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(.35)}

/* ---------- Closing band ---------- */
.sec:has(> .wrap > .cta-tile){padding-block:0;background:var(--primary-d)}
.sec:has(> .wrap > .cta-tile) > .wrap{max-width:none;padding:0}
.cta-tile{position:relative;overflow:hidden;background:var(--primary-d);color:#fff;
  padding:clamp(48px,6.4vw,92px) max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)))}
.cta-tile::before{content:"";position:absolute;inset:0;background:var(--drawing) right center / auto 150% no-repeat;
  filter:invert(1);mix-blend-mode:screen;opacity:.12;pointer-events:none}
.cta-tile > *{position:relative}
.cta-tile .eb{background:none!important;color:#fff!important}
.cta-tile h2{color:#fff;margin-bottom:14px;max-width:22ch;font-weight:500}
.cta-tile p{color:rgba(255,255,255,.8);max-width:56ch;margin-bottom:28px}
.cta-tile .btn.b-white{background:var(--accent);border-color:var(--accent)!important;color:#fff}
.cta-tile .btn.b-white:hover{background:#9C2A4E}
.cta-tile .btn.b-white + .btn.b-white{background:transparent!important;border-color:rgba(255,255,255,.5)!important}
.cta-tile .btn.b-white + .btn.b-white:hover{background:#fff!important;color:var(--primary-d)!important}

/* ---------- Footer ---------- */
.foot{background:#100B2E;color:rgba(255,255,255,.7);padding-top:clamp(44px,5.4vw,76px);border-top:3px solid var(--accent)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:clamp(26px,3.6vw,56px)}
/* The logo is drawn for a light ground, so in the dark footer it keeps a white plate. */
.foot .flogo{height:104px;width:auto;margin-bottom:20px;background:var(--white);padding:10px 22px;border-radius:var(--r)}
.foot p{font-size:.93rem;max-width:36ch}
.foot h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:18px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.14)}
.foot li{margin-bottom:10px}
.foot li a{color:rgba(255,255,255,.72);font-size:.93rem}
.foot li a:hover{color:#fff}
.fc li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem}
.fc a{color:#fff!important;font-weight:600}
.fc svg{width:16px;height:16px;flex:none;margin-top:5px;color:#D27A96}
.fsoc{display:flex;gap:8px;margin-top:20px}
.fsoc a{width:40px;height:40px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;
  transition:background .2s ease,border-color .2s ease}
.fsoc a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.fsoc svg{width:16px;height:16px}
.fend{margin-top:clamp(32px,4vw,56px);border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.84rem;color:rgba(255,255,255,.55)}
.fend .tag{font-family:var(--display);font-style:italic;color:rgba(255,255,255,.75)}

/* ---------- WhatsApp ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 22px rgba(37,211,102,.36);transition:transform .2s ease}
.wa:hover{transform:scale(1.07)}
.wa svg{width:28px;height:28px;fill:#fff}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white);color:var(--ink);
  padding:12px 20px;font-weight:700;box-shadow:var(--shadow)}
.skip:focus{left:0}

/* ---------- Search sheet ---------- */
.sheet{position:fixed;inset:0;z-index:110;background:rgba(16,11,46,.6);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s}
body.search-open .sheet{opacity:1;visibility:visible}
.sheet-in{background:var(--white);border-bottom:3px solid var(--accent);box-shadow:var(--shadow-l);
  padding:clamp(24px,3.6vw,44px) 0;transform:translateY(-16px);transition:transform .28s cubic-bezier(.2,.75,.25,1)}
body.search-open .sheet-in{transform:none}
.sheet-form{display:flex;align-items:center;gap:10px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sheet-form input{flex:1;min-width:0;border:0;border-bottom:2px solid var(--ink);background:none;
  padding:14px 4px;font-family:var(--display);font-size:clamp(1.1rem,2vw,1.5rem);color:var(--ink)}
.sheet-form input:focus{outline:0;border-bottom-color:var(--accent)}
.sheet-hint{max-width:var(--maxw);margin:12px auto 0;padding-inline:var(--pad);font-size:.85rem;color:var(--muted)}

/* ---------- Prose (bodies typed into the admin panel) ---------- */
.prose{color:var(--body);font-size:1.02rem;line-height:1.78}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:1.8em 0 .6em}
.prose h3{font-size:clamp(1.12rem,1.5vw,1.3rem);margin:1.6em 0 .5em}
.prose h4{margin:1.4em 0 .4em}
.prose p{margin:0 0 1.1em}
.prose strong{color:var(--ink)}
.prose a:not(.btn){font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose ul{list-style:none;margin:0 0 1.2em}
.prose ul li{position:relative;padding-left:28px;margin-bottom:9px}
.prose ul li::before{content:"";position:absolute;left:2px;top:.46em;width:6.5px;height:11.5px;
  border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.prose ol{margin:0 0 1.2em;padding-left:22px}
.prose ol li{margin-bottom:9px;padding-left:6px}
.prose ol li::marker{color:var(--accent);font-family:var(--display);font-weight:600}
.prose img{margin:1.4em 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose code{background:var(--paper);border:1px solid var(--line);padding:1px 6px;font-size:.88em}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-2)}
.prose th{color:var(--ink);font-weight:700;background:var(--paper);border-bottom:2px solid var(--ink)}
.prose-wrap{overflow-x:auto}

/* ---------- Specs table ---------- */
.specs{width:100%;border-collapse:collapse;font-size:.95rem}
.specs th{width:40%;text-align:left;padding:13px 16px 13px 0;color:var(--ink);font-weight:700;border-bottom:1px solid var(--line-2);vertical-align:top}
.specs td{padding:13px 0;border-bottom:1px solid var(--line-2)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}

/* ---------- Search results / group headings ---------- */
.sres-head{display:flex;align-items:baseline;gap:12px;font-size:clamp(1.3rem,2vw,1.7rem);margin:40px 0 20px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.sres-head:first-child{margin-top:0}
.sres-head span{font-family:var(--sans);font-size:.76rem;font-weight:700;color:var(--accent);letter-spacing:.08em}
.sres{display:grid;gap:10px}
.sres a{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--white);
  border:1px solid var(--line);border-left:3px solid transparent;padding:16px 20px;color:var(--body);
  transition:border-color .2s ease,box-shadow .2s ease}
.sres a:hover{border-left-color:var(--accent);box-shadow:var(--shadow-s)}
.sres-img{width:64px;height:64px;overflow:hidden;background:var(--stone);flex:none}
.sres-img img{width:100%;height:100%;object-fit:cover}
.sres-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sres-body strong{color:var(--ink);font-family:var(--display);font-weight:600;font-size:1.08rem}
.sres-body em{font-style:normal;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.sres-body span{font-size:.9rem;color:var(--body)}
.sres-go{color:var(--accent);display:grid;place-items:center}
.sres-go svg{width:17px;height:17px;transition:transform .2s ease}
.sres a:hover .sres-go svg{transform:translateX(4px)}
mark{background:#F6E3A8;color:var(--ink);padding:0 2px}

/* ---------- Notices and empty states ---------- */
.alert{display:flex;align-items:flex-start;gap:11px;padding:14px 18px;font-size:.93rem;font-weight:600;margin-bottom:18px}
.alert svg{width:18px;height:18px;flex:none;margin-top:2px}
.alert--ok{background:var(--ok-l);color:var(--ok);border-left:3px solid var(--ok)}
.empty{background:var(--white);border:1px dashed var(--line);padding:clamp(32px,5vw,60px);text-align:center;color:var(--muted)}
.empty h3{margin-bottom:8px}

/* ---------- Photo gallery ----------
   A mosaic of at most five: one large photo and four beside it. Further
   photos stay in the page as hidden links, counted on the last tile ("+11");
   the lightbox (site.js) steps through all of them. Without JavaScript the
   tiles are plain links to the full-size files. */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.8vw,12px)}
.gal a{position:relative;display:block;overflow:hidden;background:var(--stone);aspect-ratio:4/3;cursor:zoom-in}
.gal a:first-child{grid-column:span 2;grid-row:span 2}
.gal a.more{display:none}
.gal a[data-more]::after{content:attr(data-more);position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(16,11,46,.66);color:#fff;font-family:var(--display);font-size:clamp(1.3rem,2.4vw,2rem);
  transition:background .25s ease}
.gal a[data-more]:hover::after{background:rgba(134,31,65,.78)}
.gal--1{grid-template-columns:1fr}
.gal--1 a:first-child{grid-column:auto;grid-row:auto;aspect-ratio:16/9}
.gal--2{grid-template-columns:1fr 1fr}
.gal--2 a:first-child{grid-column:auto;grid-row:auto}
.gal--3{grid-template-columns:2fr 1fr}
.gal--3 a:first-child{grid-column:auto;grid-row:span 2;aspect-ratio:auto}
.gal--4{grid-template-columns:3fr 1fr}
.gal--4 a:first-child{grid-column:auto;grid-row:span 3;aspect-ratio:auto}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.gal a:hover img{transform:scale(1.04)}

.lb{position:fixed;inset:0;z-index:200;background:rgba(12,8,32,.95);display:none;align-items:center;
  justify-content:center;padding:clamp(14px,4vw,56px)}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb button{position:absolute;width:48px;height:48px;border:1px solid rgba(255,255,255,.3);cursor:pointer;display:grid;
  place-items:center;background:rgba(0,0,0,.3);color:#fff;transition:background .18s ease}
.lb button:hover{background:var(--accent);border-color:var(--accent)}
.lb button svg{width:20px;height:20px}
.lb-x{top:18px;right:18px}
.lb-p{left:18px;top:50%;transform:translateY(-50%)}
.lb-n{right:18px;top:50%;transform:translateY(-50%)}
.lb-c{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:.85rem;
  font-weight:600;letter-spacing:.1em}

/* ---------- Team ---------- */
.person{align-items:center;text-align:center;border-top:3px solid var(--primary)}
.avatar{width:112px;height:112px;border-radius:50%;overflow:hidden;margin-bottom:18px;flex:none;background:var(--stone);
  border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:2.1rem;color:var(--primary)}
.avatar img{width:100%;height:100%;object-fit:cover}
.person .role{color:var(--accent);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin:-2px 0 12px}
.person a{font-weight:600;font-size:.95rem}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .t3{grid-column:span 6}.t4{grid-column:span 6}.t5{grid-column:span 12}
  .t7{grid-column:span 12}.t8{grid-column:span 12}.t9{grid-column:span 12}
  .fgrid{grid-template-columns:1fr 1fr}
  .menu{gap:4px}
  .menu > li > a{padding:14px 8px 0;font-size:.78rem}
  .about{grid-template-columns:1fr}
  .about-img{max-width:520px}
}
@media (max-width:940px){
  .mbtn{display:grid}
  :root{--navh:78px}
  .logo{height:calc(var(--navh) + 10px);padding:4px 16px 6px;border-radius:0 0 20px 0;border-width:4px}
  .nav-cta{margin-left:auto}
  .nav-cta > .btn{display:none}
  /* The menu becomes a panel that drops from under the header. */
  /* Absolute inside the sticky header, so it always starts at the header's
     foot whether or not the top bar has scrolled away. */
  .menu{position:absolute;left:0;right:0;top:100%;height:calc(100dvh - var(--navh));margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--white);overflow-y:auto;overscroll-behavior:contain;padding:8px var(--pad) calc(80px + env(safe-area-inset-bottom,0px));
    transform:translateY(-10px);opacity:0;visibility:hidden;z-index:95;
    transition:transform .28s cubic-bezier(.2,.75,.25,1),opacity .22s ease,visibility .28s}
  body.menu-open .menu{transform:none;opacity:1;visibility:visible}
  body.menu-open{overflow:hidden}
  .menu > li{display:block;border-bottom:1px solid var(--line-2)}
  .menu > li > a,.menu > li.cur > a{padding:18px 2px;justify-content:space-between;font-size:.95rem;font-weight:600;color:var(--ink)}
  .menu > li > a:hover,.menu > li.open > a,.menu > li.cur > a{color:var(--accent)}
  .menu > li > a::before{display:none}
  .drop::before{display:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--accent);
    display:none;min-width:0;padding:0 0 0 10px;margin:0 0 16px 2px}
  .menu > li:hover .drop{transform:none}
  .menu > li.open > .drop{display:block;animation:fu .26s ease both}
  .drop a.drop-all{display:flex;color:var(--accent)}
  body.menu-open .mbtn i::before{transform:translateY(5px) rotate(45deg)}
  body.menu-open .mbtn i::after{transform:translateY(-5px) rotate(-45deg)}
  /* Narrow screens: every layout stacks, and the picture is shown whole — the
     full width of the screen at its own proportions, never cropped. The hero
     is then as tall as its picture and words need, not one screen. */
  .hsplit,.hsplit--full,.hsplit--image{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .hs-text,.hsplit--full .hs-text{padding:36px var(--pad) 40px;max-width:none}
  .hs-img,.hsplit--full .hs-img,.hsplit--image .hs-img{position:relative;inset:auto;min-height:0;order:-1;background:var(--white)}
  .hs-img img,.hsplit--full .hs-img img,.hsplit--image .hs-img img{position:static;width:100%;height:auto;object-fit:contain}
  .hsplit--full .hs-img::after{display:none}
  .hero h1,.hero-h{font-size:clamp(2rem,7.4vw,2.8rem);margin-bottom:16px}
  .hs-text .btns{margin-top:24px}
  .hs-panel{margin-top:26px;padding-top:20px}
  /* Stacked layout: the picture is on top, so the controls go to its top corner. */
  .hnav{top:14px;bottom:auto;right:12px}
  .hnav .iconbtn{width:40px;height:40px}
  .gal,.gal--3,.gal--4{grid-template-columns:repeat(2,1fr)}
  .gal--3 a:first-child,.gal--4 a:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}
  .phead::before{inset:0 0 0 30%;opacity:.2}
}
@media (max-width:680px){
  .t3,.t4,.t6,.t7,.t8,.t9{grid-column:span 12}
  .cols2{columns:1}
  .fm .fr{grid-template-columns:1fr}
  .dl > div{grid-template-columns:1fr;gap:2px}
  .fgrid{grid-template-columns:1fr}
  .btn{width:100%}
  .btns{flex-direction:column}
  .sres a{grid-template-columns:1fr;gap:10px}
  .sres-go{display:none}
  .statrow{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2n){border-right:1px solid var(--line)}
  .pcard,.pcard.t6,.pcard.t8,.pcard.t12,.pcard.t3{aspect-ratio:4/4.4}
  .tile--img{min-height:240px}
  .lb-p{left:8px}.lb-n{right:8px}
  .about-img{padding:0 0 16px 16px}
  .about-img::before{right:16px;top:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}