/* ==========================================================================
   Everaus R.E.D.

   Direction, from the client, in order:
     "too much"  ->  "cleaner, more formal, like everaus.ee"  ->  "too thin,
     grey text should be black, lose the boxes, it needs to be premium",
     plus: keep the red fade on the images and the red rule under the headline.

   So the rules here are:
     NO BOXES. No cards, no bordered panels, no filled tiles. Structure comes
       from a red hairline, from whitespace, and from the pictures themselves.
     TEXT IS BLACK. Grey is for a handful of labels, never for reading copy.
     Headings are weight 500 with the key word at 700 (the "Meist kui
       arendajast" device from the parent site), over a red rule.
     Photographs carry a red gradient on their outer edge, alternating side.

   One accent (#E50713, R.E.D.'s own), one theme (light).
   ========================================================================== */
@import url("fonts.css");

:root{
  --page:#FFFFFF;
  --band:#F6F7F9;          /* the only fill on the site, used sparingly */
  --band-2:#EBEEF1;        /* the services bar, a step deeper */
  --panel:#282828;         /* the parent site's panel charcoal, measured */
  --dark:#141414;

  --ink:#141414;           /* reading copy is black, not grey */
  --ink-2:#33383D;         /* barely secondary, still near-black */
  --ink-3:#6E6E6E;         /* labels only: dt, hints, footer keys */
  --line:#E4E6E9;
  --line-2:#C9CDD2;

  --red:#E50713;
  --red-ink:#B00610;       /* 6.7:1 on white, for small red text */
  --red-dark:#A8050E;
  --on-red:#FFFFFF;

  --sans:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --maxw:1500px;
  --gut:clamp(22px,4.4vw,72px);
  --nav-h:84px;
  --r:2px;
  --e:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--page);scroll-behavior:smooth;color-scheme:light;
  -webkit-tap-highlight-color:rgba(229,7,19,.15)}
a,button,input,select,textarea,summary{touch-action:manipulation}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden}
/* Sticky footer. On the short pages - aitah, viga, 404 - the content does not
   fill the screen, and without this the dark footer bar floats in the middle
   with white below it. main grows to take the slack so the footer is always at
   the bottom; the empty white space sits above it, which is what it should do.
   Only header, main and footer are in flow here: .skip and the SVG sprite are
   both position:absolute, and <script> is display:none. */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* The scrollbar, in the site's own greys rather than the OS default.
   The two mechanisms are mutually exclusive on purpose: Chrome 121+ and Firefox
   honour scrollbar-color/-width and IGNORE ::-webkit-scrollbar once they are
   set, so the -webkit- block sits behind @supports not and only ever reaches
   Safari and older Chrome. Applying both unguarded lets them fight.
   --ink-3 on --band is 4.8:1, well past the 3:1 that WCAG 1.4.11 asks of a
   control; "thin" is ~11px in Chrome, still a comfortable drag target. */
html{scrollbar-width:thin;scrollbar-color:var(--ink-3) var(--band)}
@supports not (scrollbar-color:auto){
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-track{background:var(--band)}
  /* the border fakes the inset the standard property gives us for free */
  ::-webkit-scrollbar-thumb{background:var(--ink-3);border:3px solid var(--band);
    border-radius:6px}
  ::-webkit-scrollbar-thumb:hover{background:var(--ink)}
  ::-webkit-scrollbar-corner{background:var(--band)}
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
/* 500, not 400: Inter reads lighter than the Arial the parent site uses */
h1,h2{margin:0;font-weight:500;letter-spacing:-.006em;line-height:1.22;text-wrap:balance}
h3{margin:0;font-weight:600;letter-spacing:-.004em;line-height:1.3;text-wrap:balance}
/* the parent's headline device: "Meist kui **arendajast**" */
h1 strong,h2 strong,h3 strong{font-weight:700}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
@supports (padding:max(0px)){
  .wrap,.nav__in,.hero__in,.phead__in{
    padding-left:max(var(--gut),env(safe-area-inset-left));
    padding-right:max(var(--gut),env(safe-area-inset-right))}
}
.pad{padding-block:clamp(52px,6vw,110px)}
.pad-s{padding-block:clamp(34px,3.6vw,58px)}
.band{background:var(--band)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;z-index:99;background:var(--red);color:var(--on-red);padding:12px 18px}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

h1{font-size:clamp(1.7rem,2.6vw,2.35rem)}
h2{font-size:clamp(1.5rem,2.3vw,2.05rem)}
h3{font-size:clamp(1.05rem,1.25vw,1.2rem)}
.lede{font-size:clamp(1.06rem,1.3vw,1.2rem);color:var(--ink);font-weight:400}
.body{color:var(--ink-2)}
.small{font-size:.95rem}
.muted{color:var(--ink-3)}

/* the red hairline under a headline. not a box, a line. */
.rule{display:block;height:1px;background:var(--red);border:0;
  margin:20px 0 24px;width:100%;max-width:620px}
.rule--short{max-width:150px}

/* ----------------------------------------------------------------- nav --- */
.nav{position:sticky;top:0;z-index:50;background:var(--page);
  border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);
  padding-inline:var(--gut);min-height:var(--nav-h);max-width:var(--maxw);margin:0 auto}
.nav__logo img{height:42px;width:auto}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);margin-left:auto}
/* :not(.cta) so a nav rule can never quietly resize the button; it has twice */
.nav__links a:not(.cta){font-size:.97rem;font-weight:500;color:var(--ink);padding:6px 0;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav__links a:not(.cta):hover{color:var(--red-ink)}
.nav__links a:not(.cta)[aria-current]{color:var(--red-ink);border-bottom-color:var(--red)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);
  color:var(--ink);font:inherit;font-size:.94rem;padding:9px 16px;border-radius:var(--r);
  cursor:pointer}

.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  padding:13px 26px;min-height:46px;background:var(--red);color:var(--on-red);
  font-weight:600;font-size:.95rem;line-height:1.2;border:1px solid var(--red);
  border-radius:var(--r);cursor:pointer;font-family:inherit;
  transition:background .2s,border-color .2s,color .2s}
.cta:hover{background:var(--red-dark);border-color:var(--red-dark)}
.cta--ghost{background:none;border-color:var(--line-2);color:var(--ink)}
.cta--ghost:hover{background:var(--dark);border-color:var(--dark);color:#fff}
.cta--light{background:none;border-color:rgba(255,255,255,.7);color:#fff}
.cta--light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.cta svg{transition:transform .25s var(--e)}
.cta:hover svg{transform:translateX(3px)}

/* a link that stays a link, not a button in disguise */
.lnk{display:inline-flex;align-items:center;gap:9px;font-weight:500;color:var(--red-ink);
  border-bottom:1px solid rgba(229,7,19,.35);padding-bottom:2px;transition:border-color .2s}
.lnk:hover{border-bottom-color:var(--red)}
.lnk svg{transition:transform .25s var(--e)}
.lnk:hover svg{transform:translateX(3px)}

@media (max-width:980px){
  .burger{display:inline-flex}
  .nav__links{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--page);border-bottom:1px solid var(--line);
    padding:4px var(--gut) 22px;display:none}
  .nav__links[data-open="true"]{display:flex}
  .nav__links a:not(.cta){padding:14px 0;border-bottom:1px solid var(--line)}
  .nav__links a:not(.cta)[aria-current]{border-bottom-color:var(--line)}
  .nav__links .cta{margin-top:18px;align-self:flex-start}
}

/* --------------------------------------------------------------- figure --- */
/* The client's favourite detail, and he was specific: NOT a smooth fade.
   Three hard-edged vertical bands stepping down in opacity, the way the parent
   site does it. Hard stops (`X% Y%` with no blend) are the whole point; a
   gradient interpolation here is the thing he rejected. */
.fig{position:relative;overflow:hidden;background:var(--band)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(270deg,
    rgba(229,7,19,.94) 0 4.5%,
    rgba(229,7,19,.58) 4.5% 9.5%,
    rgba(229,7,19,.26) 9.5% 14.5%,
    transparent 14.5%)}
.fig--left::after{background:linear-gradient(90deg,
  rgba(229,7,19,.94) 0 4.5%,
  rgba(229,7,19,.58) 4.5% 9.5%,
  rgba(229,7,19,.26) 9.5% 14.5%,
  transparent 14.5%)}
.fig--none::after{display:none}

/* ----------------------------------------------------------- object block -- */
/* The parent's development block, which the client asked for by name: a dark
   charcoal panel carrying the words, the picture alongside it offset downward so
   the rectangle is broken, a red status tag on the picture's top corner, and the
   stepped red bands on the picture's INNER edge (facing the text) rather than
   its outer one. */
.objs{display:grid;gap:clamp(28px,3.4vw,64px)}
.obj{position:relative;background:var(--panel);color:#fff;display:grid}
@media (min-width:920px){
  .obj{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    margin-bottom:clamp(20px,2.4vw,40px)}
  .obj__pic{margin-top:clamp(20px,2.4vw,40px);
    margin-bottom:calc(-1 * clamp(20px,2.4vw,40px))}
  .obj--flip .obj__pic{order:-1}
}
.obj__body{padding:clamp(28px,3.2vw,56px);display:flex;flex-direction:column;
  justify-content:center}
.obj__body h2{color:#fff}
.obj__body .rule{margin:18px 0 20px;max-width:480px}
.obj__body p{color:rgba(255,255,255,.86)}
.obj__pic{position:relative;overflow:hidden;background:#333;min-height:280px}
.obj__pic img{width:100%;height:100%;object-fit:cover}
.obj__pic::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(229,7,19,.94) 0 4.5%,
    rgba(229,7,19,.58) 4.5% 9.5%,
    rgba(229,7,19,.26) 9.5% 14.5%,
    transparent 14.5%)}
.obj--flip .obj__pic::after{background:linear-gradient(270deg,
  rgba(229,7,19,.94) 0 4.5%,
  rgba(229,7,19,.58) 4.5% 9.5%,
  rgba(229,7,19,.26) 9.5% 14.5%,
  transparent 14.5%)}
/* the development's own logo, in the corner of its picture. Both supplied
   files carry their own background - Kõrveringi a cream card, Kangru a dark
   one - so there is no plate behind them; a white frame around a finished
   lockup reads as a mistake. Opposite corner from the red bands and the status
   tag, and it swaps sides with the row. */
.obj__logo{position:absolute;z-index:2;bottom:0;right:0;
  display:flex;align-items:center;justify-content:center}
.obj--flip .obj__logo{right:auto;left:0}
.obj__logo img{width:clamp(96px,9.2vw,132px);height:auto}
@media (max-width:599px){.obj__logo img{width:88px}}

.obj__tag{position:absolute;top:0;right:0;z-index:2;background:var(--red);
  color:var(--on-red);font-size:.78rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;padding:9px 17px}
.obj--flip .obj__tag{right:auto;left:0}
.obj .dl{margin-top:20px}
.obj .dl dt{color:rgba(255,255,255,.55)}
.obj .dl dd{color:#fff}
.obj__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---------------------------------------------------------------- hero --- */
/* full-bleed picture, words straight on it over a gradient. no panel:
   a translucent box is still a box. */
/* The hero keeps a fixed PROPORTION rather than a fixed height. With a capped
   height, a wider screen only meant more of the picture cropped away by
   object-fit:cover - on a monitor you saw a slice of the roof instead of the
   structure. An aspect-ratio grows the band with the width, so the same amount
   of the image is visible at 1440 and at 2560. min-height guards small screens
   where the copy needs the room; max-height stops it eating a short display. */
/* Inset on three sides so the picture reads as a panel rather than a full-bleed
   slab; the right edge stays flush so the red bands still run off the screen.
   width is calc(100% - inset), not 100%: with a left margin, a full 100% width
   would push the panel past the right edge. */
.hero{position:relative;isolation:isolate;background:var(--dark);
  --inset:0px;
  width:calc(100% - var(--inset));margin:var(--inset) 0 var(--inset) var(--inset);
  aspect-ratio:12/5;min-height:clamp(400px,50vh,470px);max-height:82vh;
  display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* two layers: a dark scrim so the words hold, then the same stepped red
   bands the object blocks use, running off the right edge */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,8,8,.88) 0%,rgba(8,8,8,.62) 34%,
    rgba(8,8,8,.22) 64%,rgba(8,8,8,.10) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(270deg,rgba(229,7,19,.94) 0 4.5%,
    rgba(229,7,19,.58) 4.5% 9.5%,
    rgba(229,7,19,.26) 9.5% 14.5%,
    transparent 14.5%)}
.hero__in{position:relative;z-index:1;width:100%;margin:0 auto;
  padding:clamp(52px,6vw,96px) var(--gut);color:#fff}
/* Keeping the hero copy on the same vertical line as every heading below it,
   given the panel is pushed right by its rib.
   Cap the box at --maxw MINUS the rib, not at --maxw: centred inside a panel
   that is itself one rib narrower than the page, such a box lands exactly one
   rib right of where a --maxw box centred on the page would - which is the
   shift the panel already has. So the two agree at every width, with no
   breakpoint, and the left padding just gives the rib back. */
.hero__in{max-width:calc(var(--maxw) - var(--inset));
  padding-left:max(10px,calc(var(--gut) - var(--inset)))}
/* Below 900 the gutter has no room for a rib without crowding the headline,
   and a full-bleed hero is the right look on a phone anyway. */
@media (min-width:900px){.hero{--inset:clamp(18px,2.4vw,44px)}}
.hero h1{color:#fff;max-width:19ch;font-size:clamp(1.85rem,3.1vw,2.9rem)}
.hero .rule{max-width:340px;margin:22px 0 20px}
.hero p{color:#fff;font-size:clamp(1rem,1.1vw,1.1rem);max-width:48ch}
.hero__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* page header: shorter version of the same thing */
.phead{position:relative;isolation:isolate;background:var(--dark);
  min-height:clamp(220px,30vh,340px);display:flex;align-items:center}
.phead__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.phead::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,8,8,.84) 0%,rgba(8,8,8,.56) 42%,
    rgba(8,8,8,.24) 72%,rgba(8,8,8,.12) 100%)}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(270deg,rgba(229,7,19,.94) 0 4.5%,
    rgba(229,7,19,.58) 4.5% 9.5%,
    rgba(229,7,19,.26) 9.5% 14.5%,
    transparent 14.5%)}
.phead__in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(44px,5vw,80px) var(--gut);color:#fff}
.phead h1{color:#fff}
.phead .rule{max-width:280px;margin:18px 0 16px}
.phead p{max-width:58ch;color:#fff;font-size:1rem}

/* ------------------------------------------------------------------ row --- */
/* words one side, picture the other, sides alternating. no border anywhere. */
.row{display:grid;gap:clamp(28px,4.5vw,84px);align-items:center;
  padding-block:clamp(38px,4.6vw,76px)}
@media (min-width:920px){
  .row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .row--flip .row__fig{order:-1}
}
.row + .row{border-top:1px solid var(--line)}
.row__fig{aspect-ratio:16/10}
.row__body>p{color:var(--ink-2)}
.row__body>p + p{margin-top:14px}
/* prose pages (privaatsus) set consecutive paragraphs apart; p{margin:0} is
   the global default because most paragraphs here are single. */
.prose p + p{margin-top:14px}
.prose h2{margin-top:clamp(30px,3.2vw,46px)}
.prose h2:first-of-type{margin-top:clamp(38px,4vw,60px)}
.row__body .cta,.row__body .lnk{margin-top:26px}

/* label above a heading: red, small, no pill, no background */
.eyebrow{display:block;font-size:.82rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-ink);margin-bottom:14px}

/* -------------------------------------------------------------- services --- */
/* A grey bar running the full width with square tiles spread along it, the way
   the parent site sets out its figures. The squares are the point: the mark is
   three squares, so three tiles read as the brand rather than as cards. Two
   carry the services, the third is the red block and the call to action. */
/* A strip of squares across the full width of the screen. The three that carry
   anything - the two services and the red block - sit in the MIDDLE, with empty
   squares flanking them as pattern. Gaps between, or it stops being squares and
   turns back into a bar.

   DOM order is: empty, empty, service, service, red, empty, empty. Because the
   empties are <div> and the three real ones are <a>, `.sq--e:nth-of-type()`
   counts only the empties, so each breakpoint can reveal a symmetric number on
   each side. Column counts are odd for that reason. */
.sqstrip{display:grid;gap:clamp(12px,1.3vw,20px);width:100%;
  grid-template-columns:minmax(0,1fr)}
.sqstrip>.sq--e{display:none}
/* Column counts are set by the smallest width at which a tile is still SQUARE
   with the full description in it, measured rather than guessed: below about
   250px the copy is taller than the tile and aspect-ratio gives way. Seven
   squares therefore need roughly a 2100px screen; five fit from 1360. */
@media (min-width:600px){.sqstrip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:940px){.sqstrip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1600px){
  .sqstrip{grid-template-columns:repeat(5,minmax(0,1fr))}
  /* the inner pair: one empty each side */
  .sqstrip>.sq--e:nth-of-type(n+2):nth-of-type(-n+3){display:flex}
}
@media (min-width:2250px){
  .sqstrip{grid-template-columns:repeat(7,minmax(0,1fr))}
  .sqstrip>.sq--e{display:flex}
}

.sq{container-type:inline-size;
  aspect-ratio:1;background:var(--band-2);padding:clamp(18px,1.5vw,24px);
  display:flex;flex-direction:column;color:var(--ink);
  transition:background .25s,color .25s}
.sq h3{font-size:1.15rem;line-height:1.3;margin-top:5cqi;
  overflow-wrap:break-word;hyphens:auto}
.sq h3{font-size:clamp(1rem,7cqi,1.6rem)}
.sq p{margin-top:3.4cqi;font-size:1rem;color:var(--ink-2);line-height:1.55}
.sq p{font-size:clamp(.9rem,5.75cqi,1.24rem)}
.sq__go{margin-top:auto;padding-top:3.4cqi;font-size:.95rem;font-weight:500;
  color:var(--red-ink);display:inline-flex;align-items:center;gap:7px}
.sq__go{font-size:clamp(.86rem,5.4cqi,1.12rem)}
.sq__go svg{transition:transform .25s var(--e)}
/* exclude the red block: `a.sq:hover` (0,2,1) outranks `.sq--red:hover`
   (0,2,0), so without :not() the call-to-action turned grey on hover */
a.sq:not(.sq--red):hover{background:#E2E6EA}
a.sq:hover .sq__go svg{transform:translateX(3px)}
.sq .svc__ico svg{width:34px;height:34px}
.sq .svc__ico svg{width:clamp(30px,14cqi,58px);height:clamp(30px,14cqi,58px)}
/* every other empty square a shade off, so the flanks read as pattern */
.sq--e:nth-of-type(even){background:#EFF2F4}
.sq--red{background:var(--red);color:var(--on-red)}
.sq--red h3,.sq--red .sq__go{color:#fff}
.sq--red p{color:#fff}   /* 94% white on brand red is 4.33:1 and fails AA */
.sq--red img{width:34px;height:auto}
.sq--red img{width:clamp(30px,14cqi,58px)}
.sq--red:hover{background:var(--red-dark)}
/* the strip is full bleed; the outermost squares still keep clear of the edge */
.sqstrip{padding-inline:clamp(12px,1.3vw,20px)}
@supports (padding:max(0px)){
  .sqstrip{padding-left:max(clamp(12px,1.3vw,20px),env(safe-area-inset-left));
    padding-right:max(clamp(12px,1.3vw,20px),env(safe-area-inset-right))}
}
/* below the 3-up breakpoint a tile cannot be square and hold the copy */
@media (max-width:939px){.sq{aspect-ratio:auto;min-height:200px}}

.svc__ico{display:block;color:var(--red)}
.svc__ico svg{width:44px;height:44px}
/* on the services page the icon sits above the row heading */
.row__body .svc__ico{margin-bottom:16px}
.row__body .svc__ico svg{width:40px;height:40px}

/* ---------------------------------------------------------------- facts --- */
/* a red hairline above each figure instead of a bordered tile */
.facts{display:grid;gap:clamp(22px,2.6vw,44px)}
/* One figure is all there is now, so no column split - a two-column grid
   left the figure and its red rule spanning half the column. */
.facts>div{border-top:1px solid var(--red);padding-top:16px}
.facts b{display:block;font-size:clamp(1.9rem,2.6vw,2.5rem);font-weight:400;
  line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* direct child only: the counter lives in a <span> inside the <b>, and an
   unscoped `.facts span` turned it into a block, breaking "15+" onto two
   lines at label size */
.facts>div>span{display:block;margin-top:8px;font-size:.92rem;color:var(--ink-3)}

/* facts--solo: the homepage figure, alone in its column since the other three
   came out. At the shared size it read as a leftover rather than a statement,
   so it gets its own scale - roughly double, a heavier weight, a 2px rule and
   a label in --ink-2 rather than the quiet grey. It is the only number on the
   page; it should look like the point, not like a caption. */
.facts--solo>div{border-top-width:2px;padding-top:22px}
.facts--solo b{font-size:clamp(3.4rem,6vw,5.4rem);font-weight:600;line-height:.95;
  letter-spacing:-.03em}
.facts--solo>div>span{margin-top:12px;font-size:1.02rem;color:var(--ink-2);
  letter-spacing:.01em}

/* ----------------------------------------------------------- definition --- */
.dl{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:22px 0 0;
  font-size:.97rem;font-variant-numeric:tabular-nums}
.dl dt{color:var(--ink-3)}
.dl dd{margin:0;color:var(--ink)}

/* the mark, used once: three windows onto one photograph */
.mark{display:grid;gap:2.9%;aspect-ratio:1;width:100%;max-width:440px;
  grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}
.mark i{position:relative;overflow:hidden;background:var(--band);display:block}
.mark i:nth-child(1){grid-area:1/1}
.mark i:nth-child(2){grid-area:2/1}
.mark i:nth-child(3){grid-area:2/2}
.mark img{position:absolute;width:206.9%;height:206.9%;max-width:none;object-fit:cover}
.mark i:nth-child(1) img{left:0;top:0}
.mark i:nth-child(2) img{left:0;top:-106.9%}
.mark i:nth-child(3) img{left:-106.9%;top:-106.9%}

/* ---------------------------------------------------------------- table --- */
.spec{width:100%;border-collapse:collapse}
.spec tr{border-bottom:1px solid var(--line)}
.spec tr:first-child{border-top:1px solid var(--red)}
.spec th,.spec td{text-align:left;padding:16px 0;font-weight:400;vertical-align:top;
  font-size:.98rem}
.spec th{width:34%;color:var(--ink-3);padding-right:20px}
.spec td a{border-bottom:1px solid var(--line-2)}
.spec td a:hover{color:var(--red-ink);border-color:var(--red)}
@media (max-width:620px){
  .spec th,.spec td{display:block;width:auto;padding-bottom:0}
  .spec td{padding-top:4px;padding-bottom:16px}
}

/* ----------------------------------------------------------------- form --- */
/* underlines, not boxes */
.form{display:grid;gap:clamp(18px,2vw,28px)}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
/* form--stack keeps every field on its own row. Written as .form.form--stack
   so it outranks the two-column rule above rather than depending on order. */
.form.form--stack{grid-template-columns:1fr}
.field label{display:block;font-size:.86rem;color:var(--ink-3);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;background:transparent;
  color:var(--ink);border:0;border-bottom:1px solid var(--line-2);border-radius:0;
  padding:10px 2px;font:inherit;font-size:1rem;transition:border-color .2s}
.field textarea{min-height:130px;resize:vertical}
.field :is(input,select,textarea):hover{border-bottom-color:var(--ink-3)}
.field :is(input,select,textarea):focus{border-bottom-color:var(--red)}
.field :is(input,select,textarea):focus:not(:focus-visible){outline:none}
.field :is(input,select,textarea):focus-visible{outline:2px solid var(--red);outline-offset:3px}
.field ::placeholder{color:var(--ink-3)}
.field input[type=file]{padding:8px 0;cursor:pointer}
.field input[type=file]::file-selector-button{background:none;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r);padding:9px 16px;margin-right:14px;
  font:inherit;font-size:.9rem;cursor:pointer;transition:background .2s,color .2s}
.field input[type=file]::file-selector-button:hover{background:var(--dark);
  border-color:var(--dark);color:#fff}
.req{color:var(--red-ink)}
.hint{margin-top:6px;font-size:.88rem;color:var(--ink-3)}

/* ----------------------------------------------------------------- misc --- */
.split{display:grid;gap:clamp(28px,4vw,72px)}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.two{display:grid;gap:clamp(30px,4.5vw,80px);align-items:center}
@media (min-width:920px){.two{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
/* a rule, not a box */
.note{border-left:2px solid var(--red);padding:2px 0 2px 18px;color:var(--ink-2);
  font-size:.96rem;max-width:74ch}
.linklist{display:flex;flex-direction:column;border-top:1px solid var(--red)}
.linklist a{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--line);font-size:1.06rem;
  transition:padding-left .25s var(--e),color .2s}
.linklist a:hover{padding-left:10px;color:var(--red-ink)}

/* closing band: full-bleed picture with the red gradient, words on it */

/* --------------------------------------------------------------- footer --- */
.foot{background:var(--dark);color:#fff;padding-block:clamp(44px,5vw,72px) 26px}
.foot__grid{display:grid;gap:clamp(26px,3vw,48px)}
@media (min-width:800px){.foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot__col{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.foot__col .k{font-size:.86rem;color:rgba(255,255,255,.52);margin-bottom:6px}
.foot__col a,.foot__col span{color:rgba(255,255,255,.86);font-size:.96rem}
.foot__col a:hover{color:#fff}
.foot__logo{height:32px;width:auto;margin-bottom:6px}
.foot__mark{width:38px;margin-bottom:14px}
.foot__bot{margin-top:clamp(30px,3.6vw,50px);padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.88rem;color:rgba(255,255,255,.52)}

/* Honeypot: off-screen, not display:none - some bots skip hidden fields, and a
   field they skip cannot catch them. aria-hidden + tabindex=-1 keep it away
   from screen readers and the tab order. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* -------------------------------------------------------------- reveals --- */
[data-in]{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--e),transform .55s var(--e)}
[data-in].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-in]{opacity:1;transform:none;transition:none}
  .cta svg,.lnk svg,.linklist a,.nav__links a:not(.cta),.sq,.sq__go svg{transition:none}
  .cta:hover svg,.lnk:hover svg,a.sq:hover .sq__go svg{transform:none}
  .linklist a:hover{padding-left:0}
}