/* =========================================================================
   Trigon — website
   Every measurement is written in "mockup pixels" (u). 1u = 1px of the
   1024px-wide design mockup. At 1440px+ screens 1u = 1.40625px; between
   1024px and 1440px everything scales proportionally, so the layout stays
   an exact replica of the mockup. Below 1024px a stacked layout takes over.
   ========================================================================= */

@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-300-italic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --u:1.40625px;

  /* Colours: sampled from the mockup, then lightened (13/10/2026, option B) */
  --bg:#fdfdfd;        /* header + hero          */
  --bg-2:#fefefe;      /* services               */
  --bg-3:#fefefe;      /* contact                */
  --panel:#f8f8f8;     /* "Why" panel            */
  --panel-2:#f9f9f9;   /* form panel             */
  --ink:#111111;       /* headings               */
  --ink-2:#6a6a6a;     /* "Grow Sales."          */
  --text:#3b3b3b;      /* body copy              */
  --text-2:#444444;
  --muted:#6b6b6b;     /* small caps labels      */
  --muted-2:#555555;
  --line:#e4e4e4;      /* service dividers       */
  --line-2:#d6d6d6;    /* feature dividers       */
  --field:#d9d9d9;     /* input borders          */
  --dark:#141517;      /* buttons + footer       */
  --error:#a8261b;     /* form errors (not in the mockup) */

  --font:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --hair:max(1px, calc(1 * var(--u)));
}
@media (min-width:1024px) and (max-width:1439.98px){ :root{ --u:calc(100vw / 1024); } }
@media (max-width:1023.98px){ :root{ --u:1.3px; } }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0;font-weight:inherit}
ul{list-style:none;margin:0;padding:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid #111;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Content column: 812u wide and centred (the mockup had it 12u off-centre: 118u left, 94u right) */
.container{position:relative;width:calc(812 * var(--u));margin-left:calc(50% - 406 * var(--u))}

/* ---------- Shared type ---------- */
.eyebrow{font-size:max(9px, calc(8.3 * var(--u)));line-height:calc(12 * var(--u));font-weight:500;
  letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
.eyebrow--sm{font-size:max(9px, calc(7.2 * var(--u)));line-height:calc(10 * var(--u));letter-spacing:.31em}
.section-title{font-size:calc(26.2 * var(--u));line-height:calc(30 * var(--u));font-weight:400;color:var(--ink);text-wrap:balance}
.arrow{flex:none;fill:none;stroke:currentColor;stroke-width:1}

/* ---------- Buttons & links ---------- */
.btn{display:flex;align-items:center;width:calc(166 * var(--u));height:calc(33 * var(--u));
  padding:calc(1.4 * var(--u)) 0 0 calc(28.5 * var(--u));border:0;border-radius:0;background:var(--dark);
  color:#f2f2f2;font-size:calc(8.9 * var(--u));line-height:1;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;cursor:pointer;transition:background-color .2s ease}
.btn .arrow{width:calc(9 * var(--u));height:calc(8 * var(--u));margin-left:calc(9.5 * var(--u))}
.btn:hover{background:#2a2b2e}
.btn--block{width:100%;height:calc(26 * var(--u));padding:0;justify-content:center;
  font-size:max(9px, calc(7.4 * var(--u)));letter-spacing:.2em}
.btn--block .arrow{width:calc(7.5 * var(--u));height:calc(7 * var(--u));margin-left:calc(7.2 * var(--u))}

.link-more{display:flex;align-items:center;width:fit-content;font-size:max(9px, calc(7.5 * var(--u)));
  line-height:calc(12 * var(--u));font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#222}
.link-more .arrow{width:calc(8 * var(--u));height:calc(7 * var(--u));margin-left:calc(6.6 * var(--u));transition:transform .2s ease}
.link-more:hover .arrow{transform:translateX(3px)}

/* ---------- Header ---------- */
.site-header{height:calc(78 * var(--u));background:var(--bg)}
.site-header .container{height:100%;display:flex;justify-content:space-between;align-items:flex-start}
.brand{display:block;margin:calc(23.75 * var(--u)) 0 0 calc(.75 * var(--u));color:var(--ink)}
.brand svg{width:calc(73.9 * var(--u));height:calc(47.73 * var(--u));fill:currentColor}   /* AT mark (option Γ) + wordmark */
.nav{margin:calc(31.9 * var(--u)) 0 0 0}   /* right edge = content column edge */
.nav ul{display:flex;gap:calc(28.5 * var(--u))}
.nav a{position:relative;display:block;font-size:max(9px, calc(7.5 * var(--u)));line-height:calc(16 * var(--u));
  font-weight:500;letter-spacing:.205em;text-transform:uppercase;color:#4a4a4a;transition:color .2s ease}
.nav a:hover,.nav a[aria-current="page"]{color:#1a1a1a}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:calc(-1 * var(--u));right:0;
  top:calc(17.1 * var(--u));height:calc(1.4 * var(--u));background:#222}

/* ---------- Hero ---------- */
.hero{position:relative;height:calc(372 * var(--u));background:var(--bg);overflow:hidden}
.hero__media{position:absolute;top:0;right:calc(-11.6 * var(--u));width:calc(744 * var(--u));height:auto;max-width:none}
.hero .container{z-index:1;padding-top:calc(62.9 * var(--u))}
.hero__title{margin-top:calc(20.2 * var(--u));font-size:calc(38.8 * var(--u));line-height:calc(38 * var(--u));color:var(--ink)}
.hero__title span{display:block;text-wrap:balance}
.hero__title span + span{color:var(--ink-2)}
.hero__lead{margin-top:calc(18.05 * var(--u));font-size:calc(13.05 * var(--u));line-height:calc(19 * var(--u));color:var(--text)}
.hero .btn,.page-hero .btn{margin-top:calc(26.85 * var(--u))}

/* ---------- Services ---------- */
.services{height:calc(355 * var(--u));background:var(--bg-2)}
.services__head{padding-top:calc(36.9 * var(--u));text-align:center}
.services__head .section-title{margin-top:calc(9.47 * var(--u))}
.services__sub{margin-top:calc(2.55 * var(--u));font-size:calc(11.14 * var(--u));line-height:calc(16 * var(--u));color:#555}
.services__grid{display:grid;grid-template-columns:254fr 290fr 268fr;height:calc(161 * var(--u));margin-top:calc(42.1 * var(--u))}
.service{--pad:0px;--tx:calc(52.5 * var(--u));position:relative;padding-left:calc(var(--pad) + var(--tx))}
.service + .service{--pad:calc(33 * var(--u));--tx:calc(52.5 * var(--u));border-left:var(--hair) solid var(--line)}
.service__icon{position:absolute;left:calc(var(--pad) - 2 * var(--u));top:calc(-1 * var(--u));width:calc(27 * var(--u));height:calc(27 * var(--u));
  fill:none;stroke:#1a1a1a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.service__num{display:block;margin-top:calc(.3 * var(--u));font-size:calc(12 * var(--u));line-height:calc(14 * var(--u));font-weight:300;font-style:italic;color:#2f2f2f}
.service__num::after{content:"";display:block;width:calc(32 * var(--u));height:1px;margin-top:calc(9.3 * var(--u));background:#b5b5b5}
.service__title{margin-top:calc(12.3 * var(--u));font-size:calc(18.3 * var(--u));line-height:calc(22 * var(--u));font-weight:500;color:var(--ink)}
.service__text{margin-top:calc(14.6 * var(--u));font-size:calc(10 * var(--u));line-height:calc(17.5 * var(--u));color:var(--text-2);white-space:nowrap}
.service__text strong{font-weight:600;color:#111}
.service .link-more{margin-top:calc(22.6 * var(--u))}

/* ---------- Why Trigon ---------- */
.why{display:grid;grid-template-columns:calc(50% - 44 * var(--u)) 1fr;height:calc(275 * var(--u))}
.why__media{background:#1b1b1b url("../img/office.jpg") no-repeat;
  background-size:max(calc(532 * var(--u)), 100%) auto;background-position:27.8% calc(-24 * var(--u))}   /* 532u fills the 275u box (522u left a dark strip) */
.why__panel{background:var(--panel);padding:calc(37.2 * var(--u)) 0 0 calc(84 * var(--u))}
.why__title{margin-top:calc(12.1 * var(--u));font-size:calc(21.7 * var(--u));line-height:calc(25 * var(--u));color:var(--ink)}
.why__text{margin-top:calc(13.57 * var(--u));font-size:calc(11.05 * var(--u));line-height:calc(16 * var(--u));color:var(--text-2)}
.features{display:flex;height:calc(53 * var(--u));margin-top:calc(24.1 * var(--u))}
.feature{width:calc(110.5 * var(--u))}
.feature + .feature{width:calc(137 * var(--u));padding-left:calc(26.5 * var(--u));border-left:var(--hair) solid var(--line-2)}
.feature svg{width:calc(20 * var(--u));height:calc(20 * var(--u));margin:calc(1.5 * var(--u)) 0 0 calc(-.6 * var(--u));   /* icon ink starts on the label's left edge */
  fill:none;stroke:#2a2a2a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feature span{display:block;margin-top:calc(11.3 * var(--u));font-size:max(9px, calc(7.5 * var(--u)));line-height:calc(10.5 * var(--u));
  font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

/* ---------- Contact ---------- */
.contact{height:calc(368 * var(--u));background:var(--bg-3)}
.contact .container{display:grid;grid-template-columns:1fr calc(381 * var(--u));height:100%}
.contact__intro{padding-top:calc(65.2 * var(--u))}
.contact__title{margin-top:calc(11.17 * var(--u))}
.contact__text{margin-top:calc(12.6 * var(--u));font-size:calc(10.7 * var(--u));line-height:calc(17 * var(--u));color:var(--text-2)}
.contact__rule{width:calc(14 * var(--u));height:1px;margin-top:calc(20.03 * var(--u));background:#c4c4c4}
.contact__list{display:flex;margin-top:calc(39.1 * var(--u))}
.contact__item{position:relative;padding-left:calc(29 * var(--u))}
.contact__item:nth-child(1){width:calc(141 * var(--u))}
.contact__item:nth-child(2){width:calc(132 * var(--u))}
.contact__item svg{position:absolute;left:calc(-2 * var(--u));top:calc(-2.9 * var(--u));width:calc(17 * var(--u));height:calc(17 * var(--u));
  fill:none;stroke:#333;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.contact__label{display:block;font-size:calc(9.2 * var(--u));line-height:calc(12 * var(--u));color:#222}
.contact__value{display:block;margin-top:calc(3.3 * var(--u));font-size:calc(8.3 * var(--u));line-height:calc(12 * var(--u));color:var(--muted-2)}
.contact__value a:hover{color:#111;text-decoration:underline}

/* Form */
.contact__form{position:relative;height:calc(300 * var(--u));margin:calc(44 * var(--u)) 0 0 0;
  padding:calc(21.14 * var(--u)) calc(29 * var(--u)) 0 calc(30 * var(--u));background:var(--panel-2)}
.field label,.select label{display:block;font-size:max(9px, calc(8.2 * var(--u)));line-height:calc(11 * var(--u));color:#3f3f3f}
.field input,.field textarea{display:block;width:100%;margin-top:calc(.86 * var(--u));border:var(--hair) solid var(--field);border-radius:0;
  background:transparent;color:#111;font-size:calc(9 * var(--u));outline-offset:1px}
.field input{height:calc(19 * var(--u));padding:0 calc(6 * var(--u))}
.field + .field,.field + .field-row{margin-top:calc(7.14 * var(--u))}
.field-row{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(12 * var(--u))}
.field-row .field + .field{margin-top:0}
.select{position:relative;height:calc(32 * var(--u));margin-top:calc(10 * var(--u));border:var(--hair) solid var(--field)}
.select label{position:absolute;left:calc(5 * var(--u));top:calc(1.74 * var(--u));pointer-events:none}
.select select{position:absolute;inset:0;width:100%;height:100%;padding:calc(15.5 * var(--u)) calc(20 * var(--u)) 0 calc(5 * var(--u));
  border:0;border-radius:0;background:transparent;appearance:none;-webkit-appearance:none;font-size:max(9px, calc(8.2 * var(--u)));color:#111;cursor:pointer}
.select select:invalid{color:#9a9a9a}
.select select option{color:#111}
.select svg{position:absolute;right:calc(6 * var(--u));top:50%;width:calc(6 * var(--u));height:calc(4 * var(--u));margin-top:calc(-1 * var(--u));
  fill:none;stroke:#555;stroke-width:1.2;pointer-events:none}
.field--message{margin-top:calc(11.14 * var(--u))}
.field textarea{height:calc(47 * var(--u));margin-top:0;padding:calc(4 * var(--u)) calc(6 * var(--u));resize:none;line-height:calc(12 * var(--u));font-size:calc(8 * var(--u))}
.field input::placeholder,.field textarea::placeholder{color:#a3a3a3;opacity:1}
.contact__form .btn--block{margin-top:calc(10.86 * var(--u))}
.form-status{position:absolute;left:calc(30 * var(--u));right:calc(29 * var(--u));bottom:calc(6 * var(--u));
  font-size:max(10px, calc(7.5 * var(--u)));line-height:1.3;color:var(--muted-2);text-align:center}
.form-status.is-ok{color:#111}
.form-status.is-error,.field [aria-invalid="true"]{color:var(--error)}
.field [aria-invalid="true"],.select:has([aria-invalid="true"]){border-color:var(--error)}
.contact__form .btn:disabled{background:#4a4b4e;cursor:progress}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}   /* honeypot: bots fill it, people never see it */
/* Privacy line: shares the status slot and steps aside while a status message shows */
.form-note{position:absolute;left:calc(30 * var(--u));right:calc(29 * var(--u));bottom:calc(6 * var(--u));
  font-size:max(9px, calc(7 * var(--u)));line-height:1.3;color:#6b6b6b;text-align:center}
.form-note a{color:#555;text-decoration:underline;text-underline-offset:2px}
.form-note a:hover{color:#111}
.form-status:not(:empty) + .form-note{display:none}

/* ---------- Footer ---------- */
.site-footer{height:calc(88 * var(--u));background:var(--dark);color:#e2e2e2}
.site-footer .container{height:100%}
.footer__brand{position:absolute;left:0;top:calc(26 * var(--u));color:#fff}
.footer__brand svg{width:calc(55.92 * var(--u));height:calc(36.12 * var(--u));fill:currentColor}
.footer__divider{position:absolute;left:calc(155.46 * var(--u));top:calc(33.5 * var(--u));width:var(--hair);height:calc(21 * var(--u));background:#58595b}
.footer__tagline{position:absolute;left:calc(255 * var(--u));top:calc(38 * var(--u));font-size:max(9px, calc(7.5 * var(--u)));
  line-height:calc(12 * var(--u));font-weight:500;letter-spacing:.358em;text-transform:uppercase;color:#e2e2e2}
.footer__copy{position:absolute;right:0;top:calc(38.05 * var(--u));font-size:max(9px, calc(8.36 * var(--u)));
  line-height:calc(12 * var(--u));color:#bdbdbd}
.footer__copy a{margin-left:calc(14 * var(--u));transition:color .2s ease}
.footer__copy a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.site-footer :focus-visible{outline-color:#fff}

/* =========================================================================
   Inner pages (Services, About, Privacy). Not in the mockup: same unit
   system and visual language as the homepage. Page titles reuse
   .hero__title / .hero__lead, service headings reuse .service__*.
   ========================================================================= */
.page-hero{background:var(--bg);padding-top:calc(56 * var(--u))}
.page-hero--end{padding-bottom:calc(60 * var(--u))}
.page-hero .hero__lead{max-width:calc(450 * var(--u))}

/* Jump links under the Services title */
.jump{display:grid;grid-template-columns:254fr 290fr 268fr;margin-top:calc(46 * var(--u));border-top:var(--hair) solid var(--line)}
.jump a{display:flex;align-items:center;height:calc(48 * var(--u));font-size:calc(11 * var(--u));font-weight:500;color:var(--ink)}
.jump a + a{padding-left:calc(33 * var(--u));border-left:var(--hair) solid var(--line)}
.jump__num{width:calc(26 * var(--u));font-size:calc(10 * var(--u));font-weight:300;font-style:italic;color:#6a6a6a}
.jump .arrow{width:calc(8 * var(--u));height:calc(7 * var(--u));margin-left:calc(10 * var(--u));transform:rotate(90deg);transition:transform .2s ease}
.jump a:hover .arrow{transform:rotate(90deg) translateX(3px)}

/* Service detail rows */
.svc{background:var(--bg-2)}
.svc .container{display:grid;grid-template-columns:254fr 558fr;padding:calc(54 * var(--u)) 0 calc(58 * var(--u));border-top:var(--hair) solid var(--line)}
.svc__head{--pad:0px;position:relative;padding-left:calc(47 * var(--u))}
.svc__lead{max-width:calc(450 * var(--u));font-size:calc(13.05 * var(--u));line-height:calc(20 * var(--u));color:var(--text)}
.svc__label{margin-top:calc(28 * var(--u))}
.ticks{margin-top:calc(12 * var(--u))}
.ticks li{position:relative;padding-left:calc(17 * var(--u));font-size:calc(10 * var(--u));line-height:calc(17.5 * var(--u));color:var(--text-2)}
.ticks li + li{margin-top:calc(3 * var(--u))}
.ticks li::before{content:"";position:absolute;left:0;top:calc(8.5 * var(--u));width:calc(8 * var(--u));height:1px;background:#9a9a9a}
.ticks--2col{columns:2;column-gap:calc(32 * var(--u))}
.ticks--2col li{break-inside:avoid;margin-bottom:calc(5 * var(--u))}
.ticks--2col li + li{margin-top:0}

/* Steps (Services: how we work) and principles (About) */
.process{background:var(--panel)}
.principles{background:var(--bg-2)}
.process .container,.principles .container{padding:calc(56 * var(--u)) 0 calc(62 * var(--u))}
.process .section-title,.principles .section-title,.cta .section-title{margin-top:calc(11.17 * var(--u))}
.steps{display:grid;grid-template-columns:repeat(4, 1fr);margin:calc(40 * var(--u)) 0 0;padding:0;list-style:none}
.steps--3{grid-template-columns:repeat(3, 1fr)}
.step{padding:0 calc(26 * var(--u))}
.step:first-child{padding-left:0}
.step + .step{border-left:var(--hair) solid var(--line-2)}
.step__icon{width:calc(22 * var(--u));height:calc(22 * var(--u));margin-bottom:calc(14 * var(--u));
  fill:none;stroke:#2a2a2a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step__title{margin-top:calc(12.3 * var(--u));font-size:calc(14.5 * var(--u));line-height:calc(18 * var(--u));font-weight:500;color:var(--ink)}
.step__icon + .step__title{margin-top:0}
.step__text{margin-top:calc(9 * var(--u));font-size:calc(10 * var(--u));line-height:calc(17.5 * var(--u));color:var(--text-2);text-wrap:pretty}

/* Services title: the three pillars drawn as one triangle */
/* drawing: its ink touches the column's right edge and is centred on the text block beside it */
.page-hero__fig{position:absolute;top:calc(-24.2 * var(--u));right:calc(-27.6 * var(--u));width:calc(230 * var(--u));height:auto;color:#1a1a1a;overflow:visible}
.tri-line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.tri-pt{fill:var(--bg);stroke:currentColor;stroke-width:1.5}
.tri-txt{fill:var(--muted);font-family:var(--font);font-size:11px;font-weight:500;letter-spacing:.2em}
.tri-num{fill:#2f2f2f;font-weight:300;font-style:italic;letter-spacing:0}
.svc__role{margin-top:calc(9 * var(--u));font-size:max(9px, calc(7.5 * var(--u)));line-height:calc(12 * var(--u));
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* About: why the name (line drawings in the style of the service icons) */
.name{background:var(--bg)}
.name .container{padding:calc(56 * var(--u)) 0 calc(62 * var(--u))}
.name .section-title{margin-top:calc(11.17 * var(--u))}
.name__lead{max-width:calc(450 * var(--u));margin-top:calc(12.6 * var(--u));font-size:calc(11.14 * var(--u));line-height:calc(17 * var(--u));color:var(--text-2)}
.step__fig{display:block;width:calc(120 * var(--u));height:calc(84 * var(--u));margin-bottom:calc(16 * var(--u));overflow:visible;color:#1a1a1a}
.step__fig + .step__title{margin-top:0}
.fig-line{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.fig-thin{fill:none;stroke:#a8a8a8;stroke-width:1}
.fig-ground{stroke:var(--line-2);stroke-width:1}
.fig-pt{fill:var(--bg);stroke:currentColor;stroke-width:1.5}
.fig-force{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fig-num{fill:#2f2f2f;font-family:var(--font);font-size:12px;font-weight:300;font-style:italic}
.name + .principles .container{border-top:var(--hair) solid var(--line)}

/* About: image + text split (reuses .why) */
.why--about{height:auto;min-height:calc(275 * var(--u))}
.why--about .why__media{background-size:cover;background-position:27.8% 30%}   /* this panel can grow taller */
.why--about .why__panel{padding-bottom:calc(44 * var(--u))}
.why--about .why__text{max-width:calc(400 * var(--u))}
.why__text + .why__text{margin-top:calc(10 * var(--u))}

/* Closing call to action, centred like the services heading */
.cta{background:var(--bg-3)}
.cta .container{padding:calc(64 * var(--u)) 0 calc(70 * var(--u))}
.principles + .cta .container{border-top:var(--hair) solid var(--line)}
.cta__inner{text-align:center}
.cta__text{margin-top:calc(8 * var(--u));font-size:calc(11.14 * var(--u));line-height:calc(16 * var(--u));color:#555}
.cta .btn{margin:calc(26 * var(--u)) auto 0}

/* Legal text */
.prose{background:var(--bg-2)}
.prose .container{padding:calc(52 * var(--u)) 0 calc(72 * var(--u));border-top:var(--hair) solid var(--line)}
.prose__body{max-width:calc(560 * var(--u))}
.prose h2{margin-top:calc(30 * var(--u));font-size:calc(15 * var(--u));line-height:calc(20 * var(--u));font-weight:500;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p,.prose .ticks li{font-size:calc(10.7 * var(--u));line-height:calc(18 * var(--u));color:var(--text-2)}
.prose p{margin-top:calc(9 * var(--u))}
.prose .ticks{margin-top:calc(9 * var(--u))}
.prose .ticks li::before{top:calc(9 * var(--u))}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:#111}
.todo{background:#fff1a8;padding:0 .2em}   /* placeholder still waiting for real details */

/* =========================================================================
   Tablet & mobile (< 1024px): stacked layout, larger readable sizes
   ========================================================================= */
@media (max-width:1023.98px){
  .container{width:auto;margin:0 24px}
  .lb{display:none}                         /* desktop-only line breaks */

  .site-header{height:auto;padding-bottom:18px}
  .site-header .container{flex-wrap:wrap;row-gap:18px}
  .brand{margin:22px 0 0}
  .nav{width:100%;margin:0}
  .nav ul{justify-content:space-between;gap:12px}
  .nav a{font-size:11px;line-height:28px;letter-spacing:.16em}
  .nav a[aria-current="page"]::after{top:24px;height:1.5px}

  .hero{display:flex;flex-direction:column;height:auto;overflow:visible}
  .hero .container{order:1;padding:36px 0 40px}
  .hero__media{position:static;order:2;width:100%;height:62vw;max-height:480px;object-fit:cover;object-position:70% 0}
  .hero__title{font-size:clamp(34px, 9.6vw, 52px);line-height:1.04}
  .hero__lead{font-size:17px;line-height:1.55;max-width:34em}
  .btn{width:auto;display:inline-flex;height:48px;padding:2px 26px 0;font-size:12px}
  .btn .arrow{width:11px;height:9px;margin-left:12px}

  .services{height:auto;padding-bottom:40px}
  .services__head{padding-top:56px}
  .services__sub{font-size:15px;line-height:1.5}
  .services__grid{grid-template-columns:1fr;height:auto;margin-top:36px}
  .service,.service + .service{--pad:0px;--tx:56px;padding:28px 0 28px var(--tx);border-left:0;border-top:1px solid var(--line)}
  .service__icon{top:26px;width:30px;height:30px}
  .service__text{font-size:15px;line-height:1.65;white-space:normal}
  .link-more{font-size:11px}

  .services__head{margin-right:0}
  .why{grid-template-columns:1fr;height:auto}
  .why__media{height:56vw;max-height:440px;background-size:cover;background-position:35% 45%}
  .why__panel{padding:48px 24px 52px}
  .why__text{font-size:15px;line-height:1.6;max-width:36em}
  .features{flex-wrap:wrap;height:auto;row-gap:24px}
  .feature,.feature + .feature{width:auto;flex:1 1 0;min-width:96px;padding:0 14px;border-left:1px solid var(--line-2)}
  .feature:first-child{padding-left:0;border-left:0}
  .feature span{font-size:10px;line-height:1.45}

  .contact{height:auto;padding:56px 0}
  .contact .container{grid-template-columns:1fr;row-gap:40px;height:auto}
  .contact__intro{padding-top:0}
  .contact__text{font-size:15px;line-height:1.6}
  .contact__list{flex-wrap:wrap;gap:24px 32px}
  .contact__item:nth-child(n){width:auto}
  .contact__label{font-size:14px;line-height:18px}
  .contact__value{font-size:13px;line-height:18px}
  .contact__item svg{top:0;width:20px;height:20px;left:-2px}
  .contact__item{padding-left:30px}

  .contact__form{height:auto;margin:0;padding:26px 20px 30px}
  .field label,.select label{font-size:13px;line-height:18px}
  .field input{height:44px;font-size:16px;padding:0 12px}     /* 16px stops iOS zoom-on-focus */
  .field + .field,.field + .field-row,.field--message{margin-top:16px}
  .field-row{grid-template-columns:1fr;row-gap:16px}
  .select{height:58px;margin-top:16px}
  .select label{left:12px;top:7px}
  .select select{padding:22px 36px 0 12px;font-size:16px}
  .select svg{right:14px;width:10px;height:6px}
  .field textarea{height:120px;font-size:16px;line-height:1.4;padding:10px 12px;resize:vertical}
  .btn--block{width:100%;height:50px;font-size:12px}
  .contact__form .btn--block{margin-top:20px}
  .form-status{position:static;margin-top:12px;font-size:13px}
  .form-note{position:static;margin-top:12px;font-size:12px}

  .site-footer{height:auto;padding:40px 0 36px}
  .site-footer .container{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
  .footer__brand,.footer__divider,.footer__tagline,.footer__copy{position:static}
  .footer__brand svg{width:74px;height:48px}
  .footer__divider{width:28px;height:1px}
  .footer__tagline{font-size:11px;letter-spacing:.3em}
  .footer__copy{font-size:12px}
  .footer__copy a{display:block;margin:10px 0 0}

  /* Inner pages */
  .page-hero{padding-top:36px}
  .page-hero--end{padding-bottom:48px}
  .page-hero .hero__lead{max-width:34em}
  .jump{grid-template-columns:1fr;margin-top:36px}
  .jump a,.jump a + a{height:52px;padding-left:0;border-left:0;font-size:15px}
  .jump a + a{border-top:1px solid var(--line)}
  .jump__num{width:36px;font-size:14px}
  .jump .arrow{width:11px;height:9px}
  .svc .container{grid-template-columns:1fr;row-gap:22px;padding:44px 0 48px}
  .svc__head{padding-left:56px}
  .svc__head .service__icon{top:-2px;width:30px;height:30px}
  .svc__lead{font-size:17px;line-height:1.55}
  .svc__label{margin-top:28px}
  .ticks li,.prose .ticks li{padding-left:22px;font-size:15px;line-height:1.6}
  .ticks li::before,.prose .ticks li::before{top:.8em;width:10px;height:1px}
  .ticks li + li{margin-top:6px}
  .ticks--2col{columns:1}
  .ticks--2col li{margin-bottom:0}
  .process .container,.principles .container{padding:56px 0}
  .steps,.steps--3{grid-template-columns:1fr;margin-top:28px}
  .step,.step:first-child{padding:22px 0;border-left:0;border-top:1px solid var(--line-2)}
  .step + .step{border-left:0}
  .step__title{font-size:19px;line-height:1.3}
  .step__text{font-size:15px;line-height:1.6}
  .step__icon{width:26px;height:26px}
  .why--about .why__text{max-width:36em}
  .page-hero__fig{position:static;display:block;width:min(300px, 100%);margin-top:32px;margin-left:calc(min(300px, 100%) * -.1175)}   /* left vertex on the text edge */
  .svc__role{margin-top:8px;font-size:11px;line-height:16px}
  .name .container{padding:56px 0}
  .name__lead{font-size:15px;line-height:1.6;max-width:36em}
  .step__fig{width:140px;height:98px;margin-bottom:16px}
  .cta .container{padding:56px 0 60px}
  .cta__inner{margin-right:0}
  .cta__text{font-size:15px;line-height:1.5}
  .cta .btn{margin-top:24px}
  .prose .container{padding:40px 0 56px}
  .prose h2{margin-top:32px;font-size:20px;line-height:1.3}
  .prose p{font-size:15px;line-height:1.65}
  .prose p,.prose .ticks{margin-top:10px}
}

/* Touch screens: larger hit areas for the small text links (no visual change) */
@media (max-width:1023.98px){
  .link-more,.footer__copy a{position:relative}
  .link-more::after,.footer__copy a::after{content:"";position:absolute;inset:-12px -6px}
  .form-note a{white-space:nowrap}
}

/* Browser autofill keeps the form's look (Chrome/Safari paint autofilled fields blue or yellow) */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px var(--panel-2) inset;-webkit-text-fill-color:#111;caret-color:#111}

/* 404: short page, keep the footer at the bottom of the screen */
.page-404{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.page-404 main{flex:1 0 auto}

/* No single word left alone on the last line (Chrome, Edge, Safari 26+) */
p,li{text-wrap:pretty}

/* keep short phrases on one line */
.nowrap{white-space:nowrap}