/* Octopus Dream Art — shared stylesheet
   Layout: edge-to-edge colour fields stacked like painted walls — sky, beige, deep blue, red.
   Display type set as large as the field allows. One red accent object per field. */

:root{
  --beige:#E9DDCB;
  --blue:#1F3A5F;
  --red:#C41F08;
  --sky:#B4CEE3;
  --beige-2:#DCCDB4;
  --rule:rgba(31,58,95,.2);
  --ff:'Fredoka','Avenir Next','Segoe UI',system-ui,sans-serif;
  --bar:84px;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--beige);color:var(--blue);
  font-family:var(--ff);font-weight:400;font-size:21px;line-height:1.58;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
[hidden]{display:none!important}
::selection{background:var(--red);color:#fff}

.wrap{
  width:100%;max-width:1600px;margin-inline:auto;
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px));
}
.narrow{max-width:1100px}

/* ---------- type scale ---------- */
.display{font-weight:600;letter-spacing:-.045em;line-height:.85;margin:0;
  text-transform:uppercase;overflow-wrap:break-word}
.h2{font-weight:600;font-size:clamp(42px,7.6vw,104px);line-height:.9;letter-spacing:-.042em;
  text-transform:uppercase;margin:0;text-wrap:balance}
.h3{font-weight:500;font-size:clamp(26px,3vw,40px);line-height:1.08;letter-spacing:-.03em;margin:0}
.lead{font-size:clamp(21px,2.1vw,30px);line-height:1.42;font-weight:400;margin:0;max-width:21ch}
.body-lg{font-size:clamp(19px,1.45vw,23px);line-height:1.6;margin:0}
.label{font-size:15px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.3;margin:0}
.red{color:var(--red)}

/* ---------- text motion ---------- */
@keyframes rise{from{transform:translateY(.45em);opacity:0}to{transform:none;opacity:1}}
.anim{animation:rise .8s cubic-bezier(.2,.85,.3,1) backwards}
.hero h1 .ln{display:block}
@keyframes pop{0%,100%{transform:scale(1)}45%{transform:scale(1.26)}}
.hero h1 .dot{display:inline-block;animation:pop 2.8s ease-in-out 1.6s infinite}
.cyc{position:relative;display:inline-grid;vertical-align:bottom;color:var(--red);
  overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.cyc>span{grid-area:1/1;white-space:nowrap;transform:translateY(110%);opacity:0;
  transition:transform .52s cubic-bezier(.2,.85,.3,1),opacity .34s ease}
.cyc>span.on{transform:none;opacity:1}
.cyc>span.out{transform:translateY(-110%);opacity:0}
/* word-by-word heading reveal (JS splits the text; without JS nothing is hidden) */
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em}
.split .wi{display:inline-block;transform:translateY(115%);
  transition:transform .85s cubic-bezier(.16,.9,.24,1)}
.split.in .wi{transform:none}

/* image mask reveal */
.js .rv{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.16,.9,.24,1)}
.js .rv.in{clip-path:inset(0 0 0 0)}
.js .rv-20{clip-path:inset(0 0 100% 0 round 20px)}
.js .rv-20.in{clip-path:inset(0 0 0 0 round 20px)}
.js .rv-24{clip-path:inset(0 0 100% 0 round 24px)}
.js .rv-24.in{clip-path:inset(0 0 0 0 round 24px)}

/* cursor bubble over anything clickable in the work grid */
.cursor{position:fixed;left:0;top:0;z-index:60;width:104px;height:104px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff);font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  pointer-events:none;transform:translate(-50%,-50%) scale(0);
  transition:transform .32s cubic-bezier(.3,1.5,.5,1)}
.cursor.on{transform:translate(-50%,-50%) scale(1)}

/* letters lift under the pointer in the hero */
.hero h1 .lt{display:inline-block;transition:transform .35s cubic-bezier(.3,1.5,.5,1),color .3s ease}
.hero h1 .lt:hover{transform:translateY(-.085em);color:var(--red)}

@media(prefers-reduced-motion:reduce){
  .anim,.hero h1 .dot{animation:none}
  .split .wi{transform:none;transition:none}
  .js .rv,.js .rv-20,.js .rv-24{clip-path:none;transition:none}
  .cursor{display:none}
}

/* ---------- fixed chrome ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:40;
  padding-top:env(safe-area-inset-top,0px);
  transition:background .3s ease,box-shadow .3s ease}
.bar.stuck{background:var(--beige);box-shadow:0 1px 0 var(--rule)}
/* home page: the nav sits over the dark hero photo until the bar sticks */
@media(min-width:901px){
  .bar.on-blue:not(.stuck){color:var(--beige)}
  .bar.on-blue:not(.stuck) .nav a::after{background:var(--beige)}
}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:var(--bar);
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:max(20px,env(safe-area-inset-right,0px))}
.mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:58px;height:58px;border-radius:17px;background:var(--red);
  text-decoration:none;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.mark:hover{transform:rotate(-9deg) scale(1.06)}
.mark img{width:40px;height:40px;filter:brightness(0) invert(1)}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.nav a{font-size:17px;font-weight:500;text-decoration:none;letter-spacing:-.01em;
  position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media(max-width:760px){
  :root{--bar:72px}
  .mark{width:48px;height:48px;border-radius:14px}
  .mark img{width:33px;height:33px}
  .nav{gap:14px}
  .nav a{font-size:14px}
  .nav a.hide-sm{display:none}
}
.fab{position:fixed;z-index:40;
  right:calc(22px + env(safe-area-inset-right,0px));
  bottom:calc(22px + env(safe-area-inset-bottom,0px));
  width:108px;height:108px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.15;
  text-decoration:none;box-shadow:0 8px 30px rgba(196,31,8,.34);
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.fab:hover{transform:scale(1.09) rotate(6deg)}
@media(max-width:760px){.fab{width:84px;height:84px;font-size:13px}}

/* ---------- fields ---------- */
.field{position:relative;overflow:hidden}
.f-sky{background:var(--sky)}
.f-beige{background:var(--beige)}
.f-blue{background:var(--blue);color:var(--beige)}
.f-red{background:var(--red);color:var(--beige)}
.f-blue .label{color:var(--sky)}
.f-red .label{color:#F6D9D3}
.pad{padding-block:clamp(72px,9vw,150px)}
.pad-sm{padding-block:clamp(46px,5.5vw,86px)}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff);font-size:19px;font-weight:600;line-height:1;letter-spacing:-.01em;
  padding:20px 34px;border-radius:999px;text-decoration:none;cursor:pointer;
  border:2px solid var(--blue);background:transparent;color:var(--blue);
  transition:background .2s ease,color .2s ease,transform .2s ease}
.btn:hover{background:var(--blue);color:var(--beige);transform:translateY(-2px)}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red:hover{background:var(--blue);border-color:var(--blue)}
.btn-light{border-color:var(--beige);color:var(--beige)}
.btn-light:hover{background:var(--beige);color:var(--blue)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--red);outline-offset:4px}
.f-blue .btn:focus-visible,.f-red .btn:focus-visible{outline-color:var(--sky)}

/* ---------- hero: colour panel beside a full-height photo ---------- */
.hero{padding:0;display:grid;grid-template-columns:1.06fr .94fr;min-height:min(90svh,900px)}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:0}}

.hero-l{
  background:var(--sky);display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(26px,3vw,48px);position:relative;z-index:1;
  padding-top:calc(var(--bar) + clamp(12px,1.8vw,26px));
  padding-bottom:clamp(20px,2.4vw,34px);
  padding-left:max(20px,env(safe-area-inset-left,0px));
  padding-right:clamp(20px,3vw,52px);
}
@media(max-width:900px){.hero-l{padding-bottom:clamp(30px,5vw,46px)}}

.hero-r{position:relative;overflow:hidden;background:var(--blue)}
.hero-r img{width:100%;height:100%;object-fit:cover;object-position:54% 26%}
@media(max-width:900px){.hero-r{height:min(88vw,560px)}}

.hero-head{display:grid;grid-template-columns:1fr auto;gap:16px 38px;align-items:start}
@media(max-width:620px){.hero-head{grid-template-columns:1fr}}
.hero-intro{font-size:clamp(17px,1.2vw,20px);line-height:1.46;max-width:27ch;margin:0;justify-self:end}
@media(max-width:620px){.hero-intro{justify-self:start}}
.hero h1{font-size:clamp(54px,8.5vw,136px)}
@media(max-width:900px){.hero h1{font-size:clamp(56px,14.5vw,150px)}}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;align-items:baseline;
  border-top:2px solid rgba(31,58,95,.24);padding-top:16px}
.clock,.hero-meta span{font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- ticker ---------- */
.ticker{background:var(--blue);color:var(--beige);overflow:hidden;padding-block:clamp(22px,2.6vw,38px)}
.ticker-in{display:flex;width:max-content;animation:slide 18s linear infinite}
.ticker-run{display:flex;align-items:center;white-space:nowrap;
  gap:clamp(26px,3.2vw,54px);padding-right:clamp(26px,3.2vw,54px)}
.ticker span{font-size:clamp(26px,3.6vw,58px);font-weight:600;letter-spacing:-.028em;
  text-transform:uppercase;line-height:1}
.ticker-run span:nth-child(4n+3){color:var(--sky)}
.ticker img{width:clamp(28px,3.4vw,54px);height:auto;flex-shrink:0;animation:spin 5s linear infinite}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ticker-in,.ticker img{animation:none}}

/* ---------- section heads ---------- */
.head{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(30px,4vw,58px)}
.toggle{display:flex;gap:5px;background:rgba(31,58,95,.1);border-radius:999px;padding:5px}
.toggle button{font-family:var(--ff);font-size:15px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:10px 20px;border-radius:999px;border:0;cursor:pointer;
  background:transparent;color:var(--blue)}
.toggle button[aria-pressed="true"]{background:var(--blue);color:var(--beige)}

/* ---------- work tiles ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,30px)}
@media(max-width:700px){.grid{grid-template-columns:1fr}}
/* five-stage story strip */
.seq{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.5vw,22px);
  margin-top:clamp(34px,4.2vw,62px)}
@media(max-width:1020px){.seq{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.seq{grid-template-columns:repeat(2,1fr)}}
.seq figure{margin:0}
.seq .im{overflow:hidden;border-radius:16px;background:var(--beige-2);aspect-ratio:3/4}
.seq .im img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.seq figure:hover .im img{transform:scale(1.045)}
.seq figcaption{padding-top:13px}
.seq .st{display:block;font-size:13px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin-bottom:5px}
.seq figcaption b{display:block;font-weight:600;font-size:19px;letter-spacing:-.02em;line-height:1.2}
.seq figcaption span.d{display:block;font-size:16px;line-height:1.45;opacity:.66;padding-top:5px}
.credit{margin-top:clamp(26px,3vw,42px);font-size:17px;opacity:.68}
.credit a{color:inherit}
.tile{text-decoration:none;display:flex;flex-direction:column}
.tile .im{overflow:hidden;background:var(--beige-2);aspect-ratio:4/3}
.tile .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.tile:hover .im img{transform:scale(1.045)}
.tile-meta{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;
  padding-top:16px}
.tile-meta h3{font-weight:600;font-size:clamp(24px,2.5vw,34px);letter-spacing:-.03em;margin:0;
  line-height:1.05;transition:color .25s ease}
.tile:hover .tile-meta h3{color:var(--red)}
.tile-meta .m{font-size:16px;opacity:.65;white-space:nowrap}

.list{display:none;border-top:2px solid var(--rule)}
.list a{display:grid;grid-template-columns:auto 1fr auto;gap:18px 28px;align-items:center;
  padding-block:clamp(16px,1.8vw,26px);border-bottom:2px solid var(--rule);text-decoration:none;
  transition:padding-left .28s ease,color .22s ease;position:relative}
.list a:hover{padding-left:16px;color:var(--red)}
.list .n{font-size:15px;font-weight:600;letter-spacing:.15em;opacity:.5;font-variant-numeric:tabular-nums}
.list .t{font-weight:600;font-size:clamp(24px,3.4vw,46px);letter-spacing:-.035em;line-height:1.02;
  text-transform:uppercase}
.list .m{font-size:16px;opacity:.65;text-align:right}
@media(max-width:640px){
  .list a{grid-template-columns:auto 1fr}
  .list .m{grid-column:2;text-align:left;opacity:.6}
}
[data-view="list"] .grid{display:none}
[data-view="list"] .list{display:block}

/* ---------- portfolio index: big alternating project rows ---------- */
.proj-row{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);
  align-items:center;padding-block:clamp(40px,5vw,78px);border-top:2px solid var(--rule);
  text-decoration:none}
.proj-row:last-of-type{border-bottom:2px solid var(--rule)}
.proj-row.flip{direction:rtl}
.proj-row.flip>*{direction:ltr}
@media(max-width:820px){
  .proj-row{grid-template-columns:1fr;gap:22px;padding-block:34px}
  .proj-row.flip{direction:ltr}
}
.proj-row .im{overflow:hidden;background:var(--beige-2);aspect-ratio:16/10}
.proj-row .im img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.3,1)}
.proj-row:hover .im img{transform:scale(1.04)}
.proj-row h2{font-weight:600;font-size:clamp(34px,5.2vw,74px);line-height:.92;letter-spacing:-.04em;
  text-transform:uppercase;margin:14px 0 0;transition:color .25s ease}
.proj-row:hover h2{color:var(--red)}
.proj-row p{font-size:19px;line-height:1.55;margin:18px 0 0;opacity:.8;max-width:38ch}
.proj-row .n{font-size:15px;font-weight:600;letter-spacing:.2em;opacity:.5;
  font-variant-numeric:tabular-nums}
.proj-row .go{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-size:17px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--red)}
.proj-row .go span{transition:transform .3s ease}
.proj-row:hover .go span{transform:translateX(7px)}

/* ---------- project page ---------- */
.p-head{padding-top:calc(var(--bar) + clamp(26px,3.5vw,54px));padding-bottom:clamp(30px,4vw,56px)}
.p-title{font-weight:600;font-size:clamp(46px,10vw,150px);line-height:.86;letter-spacing:-.045em;
  text-transform:uppercase;margin:16px 0 0}
.p-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,70px);
  margin-top:clamp(28px,3.5vw,54px);align-items:start}
@media(max-width:820px){.p-intro{grid-template-columns:1fr;gap:26px}}
.p-intro p{margin:0 0 18px;font-size:clamp(19px,1.5vw,23px);line-height:1.58}
.p-intro p:last-child{margin-bottom:0}
.facts{display:flex;flex-direction:column;gap:0;border-top:2px solid var(--rule)}
.fact{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;
  padding-block:15px;border-bottom:2px solid var(--rule)}
.fact dt{font-size:14px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;opacity:.6;margin:0}
.fact dd{font-size:19px;margin:0;text-align:right}
.p-bleed{overflow:hidden;height:clamp(300px,56vw,780px)}
.p-bleed img{width:100%;height:124%;object-fit:cover;will-change:transform}
.p-bleed-full{display:flex;justify-content:center;background:var(--beige-2);padding:clamp(20px,3vw,48px) 0}
.p-bleed-full img{display:block;width:auto;height:auto;max-width:100%;max-height:min(86vh,1000px);object-fit:contain}
.shots{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px)}
.shots figure{margin:0;grid-column:span 6}
.shots figure.w{grid-column:span 12}
.shots figure.t{grid-column:span 4}
.shots img{width:100%;object-fit:cover;aspect-ratio:3/2;background:var(--beige-2)}
.shots figure.t img{aspect-ratio:3/4}
.shots-full img{aspect-ratio:auto;width:100%;height:auto;object-fit:contain;background:var(--beige-2);border-radius:6px;align-self:end}
.shots figcaption{font-size:16px;opacity:.65;padding-top:11px}
.shots .tag{display:inline-block;margin-right:9px;padding:3px 9px;border-radius:999px;
  background:var(--red);color:#fff;font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;vertical-align:1px}
@media(max-width:820px){
  .shots figure,.shots figure.t{grid-column:span 6}
  .shots figure.w{grid-column:span 12}
}
@media(max-width:520px){.shots figure,.shots figure.t,.shots figure.w{grid-column:span 12}}
.p-next{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;
  text-decoration:none;padding-block:clamp(40px,5vw,76px)}
.p-next .t{font-weight:600;font-size:clamp(34px,6vw,86px);line-height:.92;letter-spacing:-.04em;
  text-transform:uppercase;transition:transform .3s ease}
.p-next:hover .t{transform:translateX(12px)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,56px);
  margin-top:clamp(36px,4.6vw,70px)}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.steps-4{grid-template-columns:repeat(4,1fr)}
.steps-5{grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.4vw,38px)}
@media(max-width:1080px){.steps-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.steps-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps-4,.steps-5{grid-template-columns:1fr}}
.steps-4 .n,.steps-5 .n{font-size:clamp(34px,3.4vw,52px)}
.f-beige .step,.f-sky .step{border-top-color:var(--rule)}
.f-beige .step .n,.f-sky .step .n{color:var(--red)}
.step{display:flex;flex-direction:column;gap:14px;padding-top:24px;
  border-top:3px solid rgba(233,221,203,.32)}
.step .n{font-weight:600;font-size:clamp(46px,5vw,76px);line-height:.85;letter-spacing:-.05em;
  color:var(--sky)}
.step h4{font-weight:600;font-size:clamp(23px,2.1vw,30px);letter-spacing:-.025em;margin:0;line-height:1.1}
.step p{font-size:19px;line-height:1.56;margin:0;opacity:.88}

/* ---------- shop ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
@media(max-width:800px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.shop-grid{grid-template-columns:1fr}}
.shop-card{text-decoration:none;display:flex;flex-direction:column}
.shop-card .ph{aspect-ratio:1/1;overflow:hidden;background:var(--sky);display:flex;
  align-items:center;justify-content:center;border-radius:20px}
.shop-card .ph img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.shop-card:hover .ph img{transform:scale(1.05)}
.shop-card .ph img.sym{width:40%;height:auto;object-fit:contain;opacity:.55}
.shop-meta{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;padding-top:15px}
.shop-meta b{font-weight:600;font-size:21px;letter-spacing:-.02em}
.shop-meta span{font-size:17px;opacity:.65;white-space:nowrap}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:860px){.about{grid-template-columns:1fr}}
.about img.por{width:100%;border-radius:24px}
.dots{display:flex;align-items:flex-end;gap:13px;height:34px;margin-top:34px}
.dots i{display:block;border-radius:50%;background:var(--blue)}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(32px,4vw,56px)}
.field-i{display:flex;flex-direction:column;gap:9px;min-width:0}
.field-i.full{grid-column:1/-1}
.field-i label{font-size:14px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;opacity:.8}
.field-i input,.field-i textarea{font-family:var(--ff);font-size:20px;color:var(--beige);
  background:transparent;border:0;border-bottom:2px solid rgba(233,221,203,.35);
  padding:12px 2px;width:100%;border-radius:0}
.field-i textarea{resize:vertical;min-height:90px}
.field-i input::placeholder,.field-i textarea::placeholder{color:var(--beige);opacity:.42}
.field-i input:focus,.field-i textarea:focus{outline:0;border-bottom-color:var(--sky)}
.note{font-size:17px;opacity:.78;margin:0}
.note.err{color:#FFC9BF;opacity:1}
.note.ok{opacity:1;font-weight:600}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
.ft-in{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;
  padding-block:clamp(50px,6vw,86px)}
.ft-col{display:flex;flex-direction:column;gap:11px;min-width:160px;font-size:19px}
.ft-col a{text-decoration:none;opacity:.85}
.ft-col a:hover{opacity:1;color:var(--red)}
.ft-big{font-weight:600;font-size:clamp(52px,11vw,170px);line-height:.84;letter-spacing:-.05em;
  text-transform:uppercase;margin:0 0 clamp(24px,3vw,46px)}
.ft-btm{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;
  padding-block:24px;border-top:2px solid var(--rule);font-size:16px;opacity:.65}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}