/* JYT website — faithful build of the supplied concept layout.
   Built on colors_and_type.css tokens. Modular 3-column sheet with
   visible construction lines, staggered project collage, grid contact form.
   Canvas reference: 1443 wide. Content margins 165 / 1292.
   Column lines at 541 and 917  → content thirds (0 / 33.3 / 66.7 / 100%). */

*{ box-sizing:border-box; }
:root{ --surface-page:#f7f3f0; }
html,body{ margin:0; padding:0; background:var(--surface-page); }
body{
  font-family:var(--font-sans);
  color:var(--fg-primary);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }

/* full-bleed hairline above the header — breaks out of the centred sheet */
.topline{
  position:relative;
  left:50%;
  right:50%;
  width:100vw;
  margin-left:-50vw;
  margin-right:-50vw;
  height:0;
  border-top:1px solid var(--jyt-line);
}

/* ---- tracked label / dash primitives ---- */
.lbl{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-primary);
}
.dash{ display:block; width:26px; height:3px; background:var(--fg-primary); }
.tick{ display:block; width:3px; height:22px; background:var(--fg-primary); }
.muted-it{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--fg-muted);
}

/* ============================================================
   Sheet — centred page with construction-line background
   ============================================================ */
.sheet{
  --band-h:147px;
  position:relative;
  max-width:1340px;
  margin:0 auto;
  /* six faint vertical lines at canvas %: 0.83 / 11.4 / 37.5 / 63.5 / 89.5 / 99.1 */
  background-image:
    linear-gradient(to right, var(--jyt-line), var(--jyt-line));
  background-repeat:no-repeat;
  background-size:0 0; /* base reset; lines drawn via ::before */
}
.sheet::before{
  content:"";
  position:absolute;
  top:var(--band-h); right:0; bottom:0; left:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right, var(--jyt-line) 1px, transparent 1px),
    linear-gradient(to right, var(--jyt-line) 1px, transparent 1px);
  background-repeat:no-repeat;
  background-position:
    11% 0, 89% 0;
  background-size:1px 100%;
  opacity:0.7;
}
/* the two lines bracketing the greige hero panel continue up into the top bleed */
.sheet::after{
  content:"";
  position:absolute;
  top:0; right:0; bottom:0; left:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(to right, var(--jyt-line) 1px, transparent 1px);
  background-repeat:no-repeat;
  background-position:
    11% 0;
  background-size:1px 100%;
  opacity:0.7;
}

/* content frame — edges land exactly on the outer construction lines (11% / 89%) */
.frame{
  position:relative;
  z-index:1;
  width:78%;
  margin:0 auto;
}

/* horizontal construction lines = section borders */
.hline{ border-top:1px solid var(--jyt-line); }

/* ============================================================
   Header
   ============================================================ */
.mast{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 0;
}
.mark{ display:flex; align-items:center; gap:13px; text-decoration:none; border-bottom:0; padding-bottom:0; margin-left:34px; }
.mark-img{ display:block; height:30px; width:auto; }
.mark-logo{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:30px;
  letter-spacing:-0.05em;
  line-height:1;
  color:var(--fg-primary);
}
.mark-sub{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:8.5px;
  letter-spacing:0.18em;
  line-height:1.35;
  text-transform:uppercase;
  color:var(--fg-secondary);
}
.nav{ display:flex; gap:26px; padding-right:32px; }
.nav a{
  font-family:var(--font-heading);
  font-weight:400;
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--fg-primary);
  text-decoration:none;
  border:0;
  background:none;
  cursor:pointer;
  padding:2px 0;
  transition:opacity var(--dur-base) var(--ease-soft);
}
.nav a:hover{ opacity:0.5; }

/* ============================================================
   Hero — greige panel + image (cols 1 | 2-3)
   ============================================================ */
.hero{
  display:grid;
  grid-template-columns:1fr 2fr;
  border-top:1px solid var(--jyt-line);
  position:relative;
}
/* hairline at the panel/image seam (37%), from image bottom up into the top bleed */
.hero::after{
  content:"";
  position:absolute;
  left:33.333%;
  top:calc(-1 * var(--band-h) - 84px);
  bottom:0;
  width:1px;
  background:var(--jyt-line);
  opacity:0.7;
  pointer-events:none;
  z-index:2;
}
.hero-panel{
  background:var(--jyt-light-greige);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:34px;
  min-height:418px;
}
.hero-panel .dash{ margin-bottom:18px; }
.hero-head{
  font-family:var(--font-heading);
  font-weight:300;
  font-size:27px;
  line-height:1.18;
  letter-spacing:-0.01em;
  color:var(--fg-primary);
  margin:0;
}
.hero-head .sub{
  display:block;
  font-family: var(--font-serif);
  font-style:italic;
  font-weight:400;
  color:var(--fg-muted);
  font-size:19px;
  margin-top:6px;
  white-space:nowrap;
}
.hero-media{ overflow:hidden; background:var(--surface-recessed); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }

/* under-hero row */
.subhero{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  border-top:1px solid var(--jyt-line);
  min-height:82px;
  position:relative;
}
/* bottom hairline extended to full viewport bleed */
.subhero::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  border-bottom:1px solid var(--jyt-line);
  pointer-events:none;
}
.subhero-left{ display:flex; align-items:center; padding:0; padding-left:34px; }
.subhero-right{
  border-left:1px solid var(--jyt-line);
  padding:0 32px 0 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
}
.subhero-copy{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:13px;
  line-height:1.55;
  color:var(--fg-secondary);
  text-align:right;
  max-width:none;
  margin:0;
}
.subhero-copy .q{ font-family:var(--font-serif); font-style:italic; color:var(--fg-muted); }
.subhero-right .dash{ margin-top:10px; }
.link-caps{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-primary);
  background:none; border:0; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:18px;
  transition:opacity var(--dur-base) var(--ease-soft);
}
.link-caps:hover{ opacity:0.5; }
.link-caps svg{ transition:transform var(--dur-base) var(--ease-soft); }
.link-caps:hover svg{ transform:translateX(8px); }

/* ============================================================
   Manifesto — centred
   ============================================================ */
.manifesto{
  padding:118px 0;
  display:flex;
  justify-content:center;
}
.manifesto p{
  font-family:var(--font-heading);
  font-weight:300;
  font-size:24px;
  line-height:1.25;
  letter-spacing:-0.005em;
  color:var(--fg-primary);
  text-align:center;
  max-width:40ch;
  margin:0;
}
.manifesto .q{ font-family:var(--font-serif); font-style:italic; color:var(--fg-muted); }

/* ============================================================
   Projects — consistent white-space grid  (--proj-ws)
   Rules:
   • Two image sizes: square (aspect 1:1) and rectangular (wide)
   • Col 1 (33%): header, greige card, project captions, load-more
   • Col 2 (67%): images only — two row types:
       A) Two square images side-by-side
       B) One rectangular image (full-width or right-offset)
   • White-space unit --proj-ws = caption-strip HEIGHT = inter-image GAP WIDTH
   ============================================================ */

:root{
  --proj-ws:100px;      /* caption strip / PROJECTS header height */
  --row-h:66px;         /* LOAD MORE row height — shared with form fields */
}

.proj{ position:relative; }

/* ── outer row chassis ─────────────────────────────────── */
.ps{
  display:grid;
  grid-template-columns:33.333% 1fr;
  border-top:1px solid var(--jyt-line);
}

/* ── col 1 base ────────────────────────────────────────── */
.ps-c1{
  border-right:1px solid var(--jyt-line);
}

/* pair row 1: label + greige card */
.ps-pr1 .ps-c1{
  display:flex;
  flex-direction:column;
}
.ps-c1-hdr{
  height:var(--proj-ws);   /* exact match with caption strips */
  padding:0 28px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--jyt-line);
  flex-shrink:0;
}
.ps-c1-card{
  flex:1;
  background:var(--jyt-light-greige);
  padding:32px 28px;
  display:flex;
  align-items:flex-start;
}
.ps-c1-card p{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  color:var(--fg-secondary);
  margin:0;
  max-width:24ch;
}
.ps-c1-card .muted-it{
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--fg-muted);
  font-size:14px;
}

/* rect row 2: caption centered, right-aligned */
.ps-c1-midcap{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  padding:0 28px;
  text-align:right;
}

/* pair row 2: cap bottom-right */
.ps-c1-botcap{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  padding:0 28px var(--proj-ws) 0;
  text-align:right;
}

/* bottom white box below greige card — same height as header and caption strips */
.ps-c1-foot{
  height:var(--proj-ws);
  flex-shrink:0;
  border-top:1px solid var(--jyt-line);
}

/* load more */
.ps-c1-load{
  display:flex;
  align-items:center;
  height:var(--row-h);
  padding:0 28px;
}

/* ── col 2 base ────────────────────────────────────────── */
.ps-c2{ min-height:0; }

/* ── PAIR ROW layout ───────────────────────────────────── */
.ps-c2-pair{
  display:flex;
  flex-direction:row;
  align-items:flex-start; /* col-a drives height via aspect-ratio */
}
/* col-a: square image + caption strip below */
.ps-col-a{
  flex:0 0 50%;          /* half col-2; no gap to subtract */
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  border-right:1px solid var(--jyt-line);  /* divider between the two images */
}
/* gap between the two image columns — zero, images are flush */
.ps-vgap{
  flex:0 0 0;
  flex-shrink:0;
}
/* col-b: caption strip above + square image filling rest */
.ps-col-b{
  flex:1;
  display:flex;
  flex-direction:column;
  align-self:stretch; /* stretches to col-a height */
}

/* Square images */
.ps-sq-main{                    /* drives pair-row height via aspect-ratio */
  display:block;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  flex-shrink:0;
  margin:0;
}
.ps-sq-fill{                    /* square, matches col-b width */
  display:block;
  width:100%;
  aspect-ratio:1/1;
  flex-shrink:0;
  overflow:hidden;
  margin:0;
}
.ps-sq-main img,
.ps-sq-fill img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* White-space strip (caption or blank) — height = --proj-ws */
.ps-ws{
  height:var(--proj-ws);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;  /* text sits at top of strip by default */
  align-items:flex-start;  /* left-align by default */
}
.ps-ws-l{ padding-left:16px; padding-top:12px; }
.ps-ws-r{
  justify-content:flex-end;    /* text sits at bottom of strip, close to image below */
  align-items:flex-end;    /* right-align text block */
  padding-right:16px;
  padding-bottom:12px;
  text-align:right;
}
.ps-ws-empty{ /* blank strip — no content, just the white space */ }

/* ── RECTANGULAR ROW: landscape image rows ─────────────── */

/* Both single-image rows share the same image height as the pair-row squares.
   Pair-row image height = 50% of col-2 width.
   Setting aspect-ratio:2/1 on col-2 (which is 2× that value wide) locks
   the row height to exactly col-2/2 = the pair-row image height. */
.ps-rr1 .ps-c2,
.ps-rr2 .ps-c2{
  aspect-ratio:2/1;
}

/* Row 2: col-2 is a flex row — image takes remaining space, right strip is --proj-ws wide */
.ps-rr1 .ps-c2{
  display:flex;
  flex-direction:row;
}
.ps-rr1-vstrip{
  flex:0 0 100px;
  width:100px;
  flex-shrink:0;
  border-left:1px solid var(--jyt-line);  /* divider between image and strip */
}

/* Shared: landscape image figure fills its flex/grid cell */
.ps-rfull{
  display:block;
  flex:1;                    /* grow to fill remaining flex space (row 2) */
  min-width:0;
  height:100%;
  overflow:hidden;
  margin:0;
}
.ps-rfull img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Row 3: col-2 is a flex row — 65px strip left, image fills remainder */
.ps-c2-rr{
  display:flex;
  flex-direction:row;
}
.ps-rr2-vstrip{
  flex:0 0 100px;
  width:100px;
  flex-shrink:0;
  border-right:1px solid var(--jyt-line);  /* divider between strip and image */
}

/* col-1 for single-image rows: left white box, caption at bottom-right */
.ps-c1-singcap{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  padding:0 28px 24px 0;
  text-align:right;
}

/* ── Load more row ─────────────────────────────────────── */
.ps-load{}

/* ── Captions (shared across all project rows) ─────────── */
.cap-name{
  font-family:var(--font-heading);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-primary);
  margin:0;
  line-height:1.3;
}
.cap-meta{
  font-family: var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:14px;
  color:var(--fg-muted);
  margin:3px 0 0;
}

/* utility */
.m0{ margin:0; }

/* ============================================================
   Contact
   ============================================================ */
.contact{ position:relative; }
.contact::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  border-top:1px solid var(--jyt-line);
  pointer-events:none;
}
.contact-label{
  height:100px;
  display:flex;
  align-items:center;
  padding-left:28px;
}
.contact-body{
  display:grid;
  grid-template-columns:1fr 2fr;
  position:relative;
}
.contact-body::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  border-top:1px solid var(--jyt-line);
  pointer-events:none;
}
.contact-aside{
  background:var(--jyt-light-greige);
  padding:34px 30px;
}
.contact-aside p{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  color:var(--fg-secondary);
  margin:0;
}
.contact-aside .muted-it{ display:block; margin-top:2px; font-size:15px; }

.form{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:var(--row-h);
}
.field{
  border-right:1px solid var(--jyt-line);
  border-bottom:1px solid var(--jyt-line);
  padding:14px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.field:nth-child(odd){ /* keep left/right rhythm */ }
.field-full{ grid-column:1 / -1; }
.field label{
  font-family:var(--font-sans);
  font-weight:500;
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.field input,.field textarea{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:15px;
  color:var(--fg-primary);
  border:0; background:none; outline:none; padding:0;
  width:100%; resize:none;
}
.form-foot{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 2fr;
}
.btn-send{
  border-right:1px solid var(--jyt-line);
  padding:24px 18px;
  font-family:var(--font-sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-primary);
  background:none; border-top:0; border-left:0; border-bottom:0; cursor:pointer;
  text-align:left;
  transition:color var(--dur-base) var(--ease-soft);
}
.btn-send:hover{ color:var(--fg-muted); }

/* tall empty margin bands top & bottom (blueprint feel) */
.band{ height:var(--band-h); }
.band-foot{ height:160px; }

/* ============================================================
   Let's Meet — CTA section
   ============================================================ */
.meet{
  border-top:1px solid var(--jyt-line);
}
.meet-label{
  height:100px;
  border-bottom:1px solid var(--jyt-line);
}
.meet-body{
  display:grid;
  grid-template-columns:33.333% 1fr;
}
.meet-col-head{
  border-right:1px solid var(--jyt-line);
  padding:60px 28px;
  display:flex;
  align-items:flex-end;
}
.meet-head{
  font-family:var(--font-heading);
  font-weight:300;
  font-size:27px;
  line-height:1.18;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--fg-primary);
}
.meet-col-body{
  padding:60px 40px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:32px;
}
.meet-copy{
  color:var(--fg-secondary);
  max-width:480px;
}

/* ============================================================
   Scroll animations — sa / sa-in
   Gated on .js-anim so no flash without JS.
   ============================================================ */
.js-anim .sa {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity  880ms cubic-bezier(0.33, 0, 0.2, 1),
    transform 880ms cubic-bezier(0.33, 0, 0.2, 1);
}
.js-anim .sa.sa-in {
  opacity: 1;
  transform: translateY(0);
}
/* Images lift a touch more */
.js-anim .ps-sq-main.sa,
.js-anim .ps-sq-fill.sa,
.js-anim .ps-rfull.sa {
  transform: translateY(22px);
}
/* List items: slightly slower */
.js-anim .studio-services-list li.sa,
.js-anim .proj-ed-item.sa {
  transition-duration: 1000ms;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  border-top:1px solid var(--jyt-line);
  padding:20px 0;
}
/* both rows: left 28px (matches Let's Meet), right 32px (matches header nav) */
.footer-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100px;
  padding:0 32px 0 28px;
  border-bottom:1px solid var(--jyt-line);
  margin-bottom:20px;
}
.footer-mark{
  margin-left:0;  /* override .mark's default margin-left:34px */
}
.footer-nav{
  display:flex;
  gap:32px;
}
.footer-nav a{
  font-family:var(--font-heading);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-primary);
  text-decoration:none;
  border-bottom:0;
  padding-bottom:0;
  transition:opacity var(--dur-base) var(--ease-soft);
}
.footer-nav a:hover{ opacity:0.5; }
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px 0 28px;
}
.footer-copy{
  font-family:var(--font-sans);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--fg-muted);
  margin:0;
}
.footer-social{
  display:flex;
  gap:24px;
}
.footer-social a{
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-muted);
  text-decoration:none;
  border-bottom:0;
  padding-bottom:0;
  transition:opacity var(--dur-base) var(--ease-soft);
}
.footer-social a:hover{ opacity:0.5; }

/* ============================================================
   CTA band — closing "contact us" call (home) → contact page
   The single permitted sage CTA in the whole site.
   ============================================================ */
.cta{
  border-top:1px solid var(--jyt-line);
  border-bottom:1px solid var(--jyt-line);
  display:grid;
  grid-template-columns:1fr 2fr;
}
.cta-aside{
  background:var(--jyt-light-greige);
  padding:40px 30px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:300px;
}
.cta-aside .dash{ margin-bottom:18px; }
.cta-aside .lbl{ color:var(--fg-secondary); }
.cta-main{
  padding:56px 0 56px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:40px;
}
.cta-title{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.14;
  letter-spacing:-0.015em;
  color:var(--fg-primary);
  margin:0;
  max-width:20ch;
}
.cta-title .sub{
  display:block;
  font-family:var(--font-serif);
  font-style:italic;
  color:var(--fg-muted);
  margin-top:4px;
}
.btn-cta{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:16px;
  white-space:nowrap;
  background:var(--jyt-deep-sage); color:var(--fg-inverse);
  font-family:var(--font-sans); font-weight:500; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  padding:18px 28px; border:0; cursor:pointer; text-decoration:none;
  transition:background var(--dur-base) var(--ease-soft);
}
.btn-cta:hover{ background:var(--jyt-sage-deep); }
.btn-cta svg{ transition:transform var(--dur-base) var(--ease-soft); }
.btn-cta:hover svg{ transform:translateX(8px); }

/* ============================================================
   Contact page — reuses .hero / .contact-body / .form
   ============================================================ */
.hero-panel .lbl{ margin-bottom:14px; color:var(--fg-secondary); }
.contact-intro{ padding:26px 0; }
.contact-info{
  display:flex;
  flex-direction:column;
  gap:30px;
  justify-content:flex-start;
}
.info-block .lbl{ display:block; color:var(--fg-muted); margin-bottom:10px; }
.info-block p{
  font-family:var(--font-sans);
  font-weight:300;
  font-size:15px;
  line-height:1.6;
  color:var(--fg-primary);
  margin:0;
}
.info-block a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--jyt-line);
  padding-bottom:1px;
  transition:opacity var(--dur-base) var(--ease-soft);
}
.info-block a:hover{ opacity:0.55; }
.field-area{ grid-column:1 / -1; grid-row:span 2; }
.field-area textarea{ height:100%; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .frame{ width:88%; }
  .sheet::before{ opacity:0.4; }
  .hero{ grid-template-columns:1fr; }
  .hero-media{ aspect-ratio:16/10; }
  .subhero{ grid-template-columns:1fr; }
  .subhero-right{ border-left:0; border-top:1px solid var(--jyt-line); align-items:flex-start; padding-left:0; }
  .subhero-copy{ text-align:left; }
  .manifesto{ padding:100px 0; }
  .manifesto p{ font-size:21px; }
  .ps-c2-pair{ flex-wrap:wrap; }
  .ps-col-a,.ps-col-b{ flex:0 0 100%; }
  .ps-vgap{ display:none; }
  .cta{ grid-template-columns:1fr; }
  .cta-aside{ min-height:auto; padding:28px 24px; }
  .cta-main{ padding:32px 0 8px; gap:28px; }
  /* collage → simple stack */
  .collage{ aspect-ratio:auto; display:flex; flex-direction:column; gap:30px; margin-top:36px; }
  .fig{ position:static; width:100% !important; aspect-ratio:16/10 !important; }
  .cap{ position:static; width:auto !important; margin-top:14px; }
  .cap.right,.cap.e{ text-align:left; }
  .cap.beside{ display:block; }
  .cap.beside .tick{ display:none; }
  .band,.band-foot{ height:90px; }
  .sheet{ --band-h:90px; }
  .form{ grid-template-columns:1fr; }
  .field{ border-right:0; }
  .form-foot{ grid-template-columns:1fr; }
  .btn-send{ border-right:0; }
}