/* AMIS home 2026. Tokens from Brand Guidelines 2026: palette p.43-46, type p.53, grid p.68. */
@font-face{font-family:"Romie";src:url("../fonts/Romie-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Romie";src:url("../fonts/Romie-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Romie";src:url("../fonts/Romie-LightItalic.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Romie";src:url("../fonts/Romie-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
	--gold:#EFA865;--bronze:#C9803F;--ink:#2A2622;--brown:#392921;--ivory:#FBF6EF;--sand:#E7DCCD;--stone:#8C8178;
	--ink-70:rgba(42,38,34,.72);--ivory-70:rgba(251,246,239,.74);--ivory-40:rgba(251,246,239,.4);
	--f-display:"Romie","Marcellus",Georgia,"Times New Roman",serif;
	--f-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
	--wrap:clamp(1360px,84vw,2080px);--gutter:clamp(16px,4vw,48px);--section:clamp(72px,10vw,136px);
	--ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);--ease-wipe:cubic-bezier(.45,0,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.js .rv{opacity:1;transform:none}}
body.amis-home{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--f-body);font-weight:400;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:12px 16px;background:var(--ink);color:var(--ivory);font-size:14px}
.skip:focus{top:16px}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}

/* Type */
.eyebrow{font-family:var(--f-body);font-weight:400;font-size:12px;letter-spacing:.15em;text-transform:uppercase;line-height:1.2;color:var(--ink-70)}
.eyebrow--gold{color:var(--gold)}
.h-display{font-family:var(--f-display);font-weight:300;font-size:clamp(34px,4.2vw,58px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;margin-top:18px}
.lede{font-size:clamp(18px,1.4vw,21px);line-height:1.6;max-width:62ch;font-weight:300}
.lede strong{font-weight:500}
.link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.link::after{content:"";width:28px;height:1px;background:var(--bronze);transition:width .3s var(--ease)}
.link:hover::after,.link:focus-visible::after{width:44px}
.link--light{color:var(--ivory)}.link--light::after{background:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;font-weight:500;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:linear-gradient(100deg,var(--gold),var(--bronze));border-radius:2px;transition:filter .25s var(--ease)}
.btn:hover{filter:brightness(1.06)}

/* Header */
.head{position:fixed;inset:0 0 auto 0;z-index:50;color:var(--ivory);transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.admin-bar .head{top:32px}
.head__in{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px}
.head.is-solid{background:var(--ivory);color:var(--ink);box-shadow:0 1px 0 rgba(42,38,34,.08)}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.brand svg{width:124px;height:auto;display:block}
.brand svg path{fill:var(--gold)}
.nav__list{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav__list>li>a,.nav__sub-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:inherit;transition:color .25s}
.nav__list>li>a:hover,.nav__sub-btn:hover{color:var(--gold)}
.head.is-solid .nav__list>li>a:hover,.head.is-solid .nav__sub-btn:hover{color:var(--bronze)}
.nav__has-sub{position:relative}
.nav__sub{position:absolute;top:100%;left:-18px;min-width:240px;padding:12px 0;background:var(--ink);color:var(--ivory);border-top:1px solid var(--bronze);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav__has-sub:hover .nav__sub,.nav__has-sub:focus-within .nav__sub,.nav__sub-btn[aria-expanded="true"]+.nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:10px 20px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ivory-70)}
.nav__sub a:hover{color:var(--gold)}
.nav__cta .btn{min-height:44px;padding-inline:22px;color:var(--ivory)} /* client request: Ivory text, Ink on hover */
.nav__cta .btn:hover,.nav__cta .btn:focus-visible{color:var(--ink)}
.burger{display:none;width:48px;height:48px;position:relative;z-index:60}
.burger span{position:absolute;left:12px;width:24px;height:1.5px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span:first-child{top:19px}.burger span:last-child{top:27px}
.nav-open .burger span:first-child{top:23px;transform:rotate(45deg)}
.nav-open .burger span:last-child{top:23px;transform:rotate(-45deg)}

/* Hero */
.hero{position:relative;isolation:isolate;min-height:min(100svh,max(940px,52vw));display:flex;align-items:center;padding:132px 0 72px;color:var(--ivory);background:#2B1E16;overflow:hidden}
/* KV build: raw concrete texture (luminosity only) over the brand brown, then the Apex "A" band as its own layer */
.hero__texture{position:absolute;inset:0;z-index:-4;background:url("../img/kv-texture-landscape.webp") center/cover no-repeat;pointer-events:none} /* the brand texture (hf original) fills the hero */
@media (min-width:1921px),(min-width:1200px) and (min-resolution:1.5dppx){.hero__texture{background-image:url("../img/kv-texture-landscape-4k.webp")}} /* large or high-density screens: 4K texture */
.hero__tint{position:absolute;inset:0;z-index:-3;background:#392921;mix-blend-mode:color;pointer-events:none} /* KV: Brown, blend Color */
.hero__a{position:absolute;inset:0;width:100%;height:100%;z-index:-2;fill:#392921;mix-blend-mode:screen;opacity:.77;pointer-events:none} /* KV: Brown, blend Screen 77%, base on the bottom edge */
.hero__a--port{display:none}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(30,20,14,.35),rgba(30,20,14,0) 50%)}

.hero__in{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(32px,6vw,96px);align-items:center}
.hero__title{font-family:var(--f-display);font-weight:300;font-size:clamp(56px,8.6vw,124px);line-height:1;letter-spacing:.02em;text-transform:uppercase;margin-top:0}
.hero__card{display:block;color:var(--ivory)}
/* large screens: the title keeps its share of the (now wider) wrap, and the film frame follows it */
@media (min-width:1456px){.hero__title{font-size:calc(var(--wrap)*.0912)}}
.hero__frame{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}
/* The film is shaped by a mask set in home.js: solid to the right of the A's edge; to the left of it the film stays as a faint ghost,
   toned with the KV brown (blend Color, like the texture) and fading out into the concrete. */
.hero__cut{position:absolute;inset:0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.hero__ghost{position:absolute;inset:0;background:#392921;mix-blend-mode:color;pointer-events:none;clip-path:polygon(0 0,0 0,0 0)}
/* poster frame and film share one wrapper so they line up exactly; no zoom, the film has logos burned in at the top and bottom edges */
.hero__media{position:absolute;inset:0;background:var(--brown) url("../img/hero-poster-fdj-1600.webp") center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s var(--ease);pointer-events:none}
.hero__video.is-playing{opacity:1}

/* Intro, about 2 s: texture, the A rising from its base, the title word by word, then the film opening from the A's edge.
   Plain CSS (from-only keyframes, so every element ends on its normal styles); it also runs without JS. The head script only holds it until the texture and Romie are in. */
@keyframes in-texture{from{opacity:0;transform:scale(1.07)}}
@keyframes in-a{from{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes in-rise{from{transform:translateY(150px)}}
@keyframes in-word{from{transform:translateY(120%)}}
@keyframes in-frame{from{-webkit-mask-position:100% 0;mask-position:100% 0}}
@keyframes in-settle{from{transform:scale(1.09)}}
@keyframes in-head{from{opacity:0;transform:translateY(-14px)}}
@keyframes in-fade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
	.hero__texture{animation:in-texture 1.9s var(--ease-out) backwards}
	.hero__a{-webkit-mask:linear-gradient(to top,#000 50%,transparent 75%) 0 100%/100% 400% no-repeat;mask:linear-gradient(to top,#000 50%,transparent 75%) 0 100%/100% 400% no-repeat;animation:in-a 1.25s var(--ease-wipe) .1s backwards}
	.hero__a-rise{animation:in-rise 1.6s var(--ease-out) .1s backwards}
	.head{animation:in-head .9s var(--ease-out) .4s backwards}
	.hero__w{display:inline-block;clip-path:inset(-.2em -.3em 0 -.3em)}
	.hero__w>span{display:inline-block;animation:in-word 1.05s var(--ease-out) .5s backwards}
	.hero__w:nth-of-type(2)>span{animation-delay:.62s}
	.hero__w:nth-of-type(3)>span{animation-delay:.74s}
	.hero__frame{-webkit-mask:linear-gradient(to left,transparent 25%,#000 50%) 0 0/400% 100% no-repeat;mask:linear-gradient(to left,transparent 25%,#000 50%) 0 0/400% 100% no-repeat;animation:in-frame 1.1s var(--ease-wipe) .85s backwards}
	.hero__media{animation:in-settle 1.3s var(--ease-out) .85s backwards}
	.wa{animation:in-fade .6s var(--ease) 1.5s backwards}
	/* once it has played, the reveal masks come off (class set by home.js) */
	.hero.is-in .hero__a,.hero.is-in .hero__frame{-webkit-mask:none;mask:none}
	.hero.is-in .hero__w{clip-path:none}
	.js:not(.is-ready) .head,.js:not(.is-ready) .hero *,.js:not(.is-ready) .wa{animation-play-state:paused}
}

/* Line intro (hero-intro.js): the A is drawn as an Ivory outline by a glowing pen, then its colour fills in (.is-filled) and only then
   does the film frame open and the film play. Only with JS and motion; otherwise the intro above runs unchanged. */
.hero--draw .hero__aline,.hero--draw .hero__spark{display:none}
@media (prefers-reduced-motion:no-preference){
	.js .hero--draw .hero__aline{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;overflow:hidden;filter:drop-shadow(0 0 2.5px rgba(251,246,239,.38)) drop-shadow(0 0 7px rgba(251,246,239,.14))}
	.js .hero--draw .hero__aline--port{display:none}
	.js .hero--draw .hero__aline path{fill:none;stroke:var(--ivory);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;visibility:hidden;transition:opacity .67s var(--ease) .17s}
	.js .hero--draw.is-filled .hero__aline path{opacity:0}
	.js .hero--draw .hero__spark{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
	.js .hero--draw .hero__aline,.js .hero--draw .hero__spark{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,#000 190px);mask-image:linear-gradient(to bottom,transparent 0,transparent 64px,#000 190px)} /* clear of the navbar text */
	.js .hero--draw .hero__a{animation:none;-webkit-mask:none;mask:none;opacity:0;transition:opacity .6s var(--ease)}
	.js .hero--draw .hero__a-rise{animation:none}
	.js .hero--draw.is-filled .hero__a{opacity:.77}
	/* the film frame waits for the fill */
	.js .hero--draw .hero__frame,.js .hero--draw .hero__media{animation-delay:.35s}
	.js .hero--draw:not(.is-filled) .hero__frame,.js .hero--draw:not(.is-filled) .hero__media{animation-play-state:paused}
}
@media (prefers-reduced-motion:no-preference) and (max-width:899px){
	.js .hero--draw .hero__aline--land{display:none}.js .hero--draw .hero__aline--port{display:block}
}
@media (prefers-reduced-motion:no-preference) and (max-width:767px){
	.js .hero--draw .hero__aline,.js .hero--draw .hero__spark{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 50px,#000 150px);mask-image:linear-gradient(to bottom,transparent 0,transparent 50px,#000 150px)}
}

/* Scroll reveal for everything below the hero: one quiet fade-and-rise. Only hidden when JS is running (html.js). */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out) var(--rv-d,0s),transform .9s var(--ease-out) var(--rv-d,0s)}
.js .rv.is-in{opacity:1;transform:none}
.split__body.rv{--rv-d:.1s}
.grid-projects .card:nth-child(even){--rv-d:.12s}
.js .card.rv:not(.is-in) .card__media img{transform:scale(1.06)}
@media print{.js .rv{opacity:1;transform:none}}

/* Split layout (asymmetrical margin, p.68) */
.split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);column-gap:clamp(24px,5vw,80px);align-items:start}
.split--head{margin-bottom:clamp(36px,5vw,64px)}
.split__body{padding-top:clamp(0px,2vw,24px)}

/* About */
.about{padding:var(--section) 0 0}
.strip{position:relative;margin-top:clamp(48px,6vw,88px);padding-bottom:var(--section)}
.strip__track{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:4px var(--gutter) 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip__track::-webkit-scrollbar{display:none}
.strip__item{flex:0 0 clamp(260px,42vw,560px);scroll-snap-align:start}
.strip__item img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--sand)}
.strip__item--wide{flex-basis:clamp(300px,58vw,820px)}
.strip__nav{display:flex;justify-content:center;gap:12px;margin-top:20px}
.strip__btn{width:48px;height:48px;border:1px solid rgba(42,38,34,.25);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:border-color .25s,color .25s}
.strip__btn svg{width:22px;height:22px}
.strip__btn:hover{border-color:var(--bronze);color:var(--bronze)}
.strip__btn[disabled]{opacity:.3;pointer-events:none}

/* Projects */
.projects{background:var(--sand);padding:var(--section) 0}
.grid-projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(24px,4vw,56px)}
.card__media{display:block;overflow:hidden;background:var(--ivory)}
.card__media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{padding:26px 0 0;max-width:60ch}
.card__name{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,2vw,28px);line-height:1.15;letter-spacing:.01em;text-transform:uppercase}
.card__sub{font-family:var(--f-display);font-style:italic;font-weight:300;font-size:clamp(17px,1.4vw,20px);line-height:1.3;color:var(--ink-70);margin-top:8px}
.card__text{margin-top:16px;font-size:16px;line-height:1.65}
.card__body .link{margin-top:10px}

/* Gallery */
.gallery{position:relative;background:var(--brown);color:var(--ivory);padding:var(--section) 0 0;isolation:isolate}
.gallery::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 190.884 196.358%22 width=%22190.884%22 height=%22196.358%22%3E%3Cpath transform=%22translate%2870.546 98.182%29 scale%281 -1%29%22 fill=%22%23EFA865%22 d=%22M0 0 L0 0 C3.197 2.072 4.59 6.039 3.409 9.66 L-22.833 75.383 L-49.067 9.66 C-50.248 6.039 -48.855 2.072 -45.658 0 L-70.546 0 C-65.619 2.968 -61.665 7.29 -59.13 12.455 C-57.68 15.414 -55.881 19.351 -53.683 24.59 L-22.833 98.182 L8.025 24.59 C11.352 16.66 13.762 11.715 15.431 8.652 C16.997 5.771 19.29 3.379 22.094 1.691 L24.888 0 Z%22/%3E%3C/svg%3E") 0 0/93.3px 96px repeat} /* heritage pattern: glyph 95.4x98.2 on a 190.9x196.4 grid (amis-pattern.ai), scaled so the A is 48px tall */
.gallery .eyebrow{color:var(--gold)}
.gallery .strip{margin-top:0}
.gallery .strip__item img{background:var(--ink)}
.gallery .strip__btn{color:var(--ivory);border-color:var(--ivory-40)}
.gallery .strip__btn:hover{border-color:var(--gold);color:var(--gold)}

/* Footer */
.foot{background:var(--ink);color:var(--ivory);padding:clamp(56px,7vw,96px) 0 32px;font-size:15px}
.foot__in{display:grid;gap:clamp(40px,5vw,72px)}
.foot__brand svg{width:168px;height:auto}
.foot__tag{font-family:var(--f-display);font-weight:300;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:16px}
.foot__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.foot__h{font-family:var(--f-body);font-weight:400;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.foot__col li{margin-bottom:10px;line-height:1.5;color:var(--ivory-70)}
.foot__col a{text-decoration:none;color:var(--ivory-70);transition:color .25s}
.foot__col a:hover{color:var(--gold)}
.foot__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;border-top:1px solid rgba(251,246,239,.12)}
.social{display:flex;gap:22px}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--gold);transition:color .25s}
.social a:hover{color:var(--bronze)}
.social svg{width:22px;height:22px}
.foot__copy,.foot__legal a{font-size:13px;color:var(--ivory-70);letter-spacing:.02em}
.foot__legal a{text-decoration:none}.foot__legal a:hover{color:var(--gold)}

/* Contact lines carry a small label (Toll free, Tel, Email, Office). The numbers and emails in the Contacts and Broker Registration columns use AMIS Sand (client request, 13 Oct 2026); hover keeps the gold cue. */
.foot__label{display:block;font-size:10.5px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.72;margin-bottom:3px}
.foot__col--labelled li{margin-bottom:16px}
.foot__col--labelled a{color:var(--sand)} /* AMIS Sand for the numbers and emails in Contacts and Broker Registration; the address keeps the footer text colour */

/* Back to top (shows after scrolling) */
.totop{position:fixed;right:22px;bottom:86px;z-index:40;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--bronze);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,color .25s}
.totop.is-visible{opacity:1;visibility:visible;transform:none}
.totop:hover{color:var(--gold)}
.totop svg{width:28px;height:28px}
/* WhatsApp */
.wa{position:fixed;right:22px;bottom:22px;z-index:40;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;color:var(--bronze);transition:transform .25s var(--ease),color .25s}

.wa:hover{transform:translateY(-2px);color:var(--gold)}
.wa svg{width:44px;height:44px}

/* Tablet */
@media (max-width:1100px){
	.foot__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1200px){
	.burger{display:block}
	.nav{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--ivory);padding:112px var(--gutter) 40px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
	.nav-open .nav{opacity:1;visibility:visible}
	.nav-open{overflow:hidden}
	.nav-open .head{color:var(--ivory);background:transparent;box-shadow:none;z-index:50}
	.nav__list{flex-direction:column;align-items:flex-start;gap:4px}
	.nav__list>li>a,.nav__sub-btn{font-family:var(--f-display);font-size:28px;letter-spacing:.04em;text-transform:uppercase;min-height:52px;color:var(--ivory)}
	.nav__sub{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;padding:0 0 8px 18px;display:none}
	.nav__sub-btn[aria-expanded="true"]+.nav__sub{display:block}
	.nav__sub a{padding:8px 0;font-size:14px;letter-spacing:.12em}
	.nav__cta{margin-top:24px}
}
/* Phones and portrait tablets: hero sized to its content (the top of the KV artwork is cropped), title top-left in three lines, film docked full-bleed on the A's foot */
@media (max-width:899px){
	.hero{min-height:0;padding:0;align-items:stretch}
	.hero::after{background:linear-gradient(180deg,rgba(30,20,14,.3),rgba(30,20,14,0) 45%)}
	.hero__in{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:clamp(28px,9vw,56px)}
	.hero__copy{padding:136px var(--gutter) 0}
	.hero__title{font-size:clamp(60px,19vw,84px);max-width:4.2em}
	.hero__frame{max-width:none;width:100%}
	.hero__texture{background-image:url("../img/kv-texture-portrait.webp")} /* portrait texture, fills the hero */
	.hero__a--land{display:none}.hero__a--port{display:block}
}
@media (min-width:600px) and (max-width:899px){
	.hero__title{font-size:clamp(84px,13vw,112px)}
}
@media (max-width:767px){
	body.amis-home{font-size:16px}
	.head__in{height:68px}
	.brand svg{width:100px}
	.split{grid-template-columns:1fr;row-gap:20px}
	.hero__copy{padding-top:112px}
	.hero__media{background-image:url("../img/hero-poster-fdj-960.webp")}
	.grid-projects{grid-template-columns:1fr}
	.grid-projects .card:nth-child(even){--rv-d:0s}
	.foot__cols{grid-template-columns:1fr}
	.foot__col--secondary{display:none} /* phones: logo, contacts, social, legal only */
	.foot{padding-top:48px}
	.foot__in{gap:36px}
	.foot__bar{flex-direction:column;align-items:flex-start;gap:18px}
	.wa{right:16px;bottom:16px;transition:transform .25s var(--ease),color .25s,bottom .35s var(--ease)}
	.totop{right:16px;bottom:76px}
}
@media (max-width:480px){
	.strip__item{flex-basis:78vw}
	.strip__item--wide{flex-basis:84vw}
}