/* --- base typography (from the design system; cascade order preserved) --- */
:root{--color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201f1d; --color-accent: #b68235; --color-accent-2: #ac803e; --color-divider: color-mix(in srgb, #201f1d 16%, transparent); --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; --color-accent-100: #fff3e4; --color-accent-200: #ffe3bf; --color-accent-300: #facb8d; --color-accent-400: #e1ad66; --color-accent-500: #c28d41; --color-accent-600: #a06f24; --color-accent-700: #7d5411; --color-accent-800: #5a3b0a; --color-accent-900: #3a270d; --color-accent-2-100: #fff3e4; --color-accent-2-200: #ffe3be; --color-accent-2-300: #f5cd96; --color-accent-2-400: #dbaf70; --color-accent-2-500: #bc8f4e; --color-accent-2-600: #9b7232; --color-accent-2-700: #79561f; --color-accent-2-800: #573d14; --color-accent-2-900: #382810; --font-heading: "Cormorant Garamond", system-ui, sans-serif; --font-heading-weight: 600; --font-body: "Lora", system-ui, sans-serif; --space-1: 4.6px; --space-2: 9.2px; --space-3: 13.8px; --space-4: 18.4px; --space-6: 27.6px; --space-8: 36.8px; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 7px; --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);}
body{background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);}
h1, h2, h3, h4{font-family: var(--font-heading); font-weight: var(--font-heading-weight);}
*, *::before, *::after{box-sizing: border-box;}
body{margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;}
h1, h2, h3, h4, h5, h6{font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);}
h1{font-size: 42px;}
h2{font-size: 32px;}
h3{font-size: 25px;}
h4{font-size: 20px;}
h5{font-size: 16px;}
h6{font-size: 13px;}
h6{letter-spacing: 0.08em; text-transform: uppercase;}
p{margin: 0 0 var(--space-3);}
a{color: var(--color-accent); text-underline-offset: 3px;}
img{display: block; max-width: 100%;}
figure{margin: 0;}
figcaption{font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent);}
:focus{outline: none;}
:focus-visible{outline: 2px solid var(--color-accent); outline-offset: 2px;}
::selection{background: color-mix(in srgb, var(--color-accent) 30%, transparent);}

/* --- style strony / page styles --- */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fs-rev{transition:none}.fs-heroimg{animation:none}}
body{background:#F8F5ED;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
a{color:#8f6427;text-decoration:none}
a:hover{color:#B68235}
img{display:block}
@keyframes fsHeroIn{from{transform:scale(1.03)}to{transform:scale(1)}}
.fs-heroimg{animation:fsHeroIn 2.4s cubic-bezier(.2,.7,.3,1) both}
.fs-rev{transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.3,1)}
.fs-rev.fs-hidden{opacity:0;transform:translateY(18px)}
.fs-rule{transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.3,1) .1s}
.fs-hidden .fs-rule{transform:scaleX(0)}
.fs-card{transition:transform .3s cubic-bezier(.2,.7,.3,1),border-color .3s ease,box-shadow .3s ease}
.fs-card:hover{transform:translateY(-4px) scale(1.012);border-color:#BFA97D;box-shadow:0 12px 30px -18px rgba(38,28,16,.45)}
.fs-card:hover .fs-ico{transform:translateY(-2px)}
.fs-ico{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.fs-btn{transition:transform .3s cubic-bezier(.2,.7,.3,1),background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.fs-btn:hover{transform:translateY(-3px) scale(1.008)}
.fs-btn span.fs-ar{display:inline-block;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.fs-btn:hover span.fs-ar{transform:translateX(5px)}
.fs-step .fs-sico{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.fs-step .fs-stx{transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.fs-step:hover .fs-sico{transform:translateY(-4px)}
.fs-step:hover .fs-stx{transform:translateY(-2px)}
.fs-conn{transition:opacity .5s ease}
.fs-step:hover+.fs-conn,.fs-conn:hover{opacity:1}
.fs-input{width:100%;align-self:start;background:#F4EDDD;border:1px solid rgba(196,177,141,.85);border-radius:2px;padding:15px 16px;font-family:Lora,Georgia,serif;font-size:15px;color:#201F1D;outline:none;transition:border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
.fs-input::placeholder{color:rgba(32,31,29,.42)}
.fs-input:focus{border-color:#C99A4E;background:#FBF6EA;box-shadow:0 0 0 3px rgba(201,154,78,.22)}

/* --- bledy pod polami formularza ---
   Jasny, cieply czerwony: ciemna czerwien marki ginie na brazowym marmurze.
   Romb przed trescia to ten sam motyw co w sekcji "Dlaczego warto". */
.fs-input[aria-invalid="true"]{border-color:#E0876A;box-shadow:0 0 0 3px rgba(224,135,106,.22)}
input[type=checkbox][aria-invalid="true"]{outline:2px solid #E0876A;outline-offset:2px}
.fs-err{display:flex;gap:9px;align-items:flex-start;margin:0;font-size:13px;line-height:1.5;color:#F2B7A2;animation:fsErrIn .25s ease both}
.fs-err::before{content:'';flex:none;width:5px;height:5px;margin-top:.55em;border:1px solid currentColor;transform:rotate(45deg)}
/* Blad zgody stoi pod calym wierszem, wyrownany do tekstu obok checkboxa. */
#fs-err-zgoda{margin-top:calc(clamp(22px,2.4vw,30px) * -1 + 8px);padding-left:29px}
@keyframes fsErrIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fs-err{animation:none}}

/* --- send confirmation on the button itself ---
   The button widens, shows a tick and "Wiadomość wysłana", and after a moment
   returns to its previous state. The width is animated by the script (CSS does not animate
   width:auto), only the states and the tick drawing live here. !important is
   needed because the button's look sits in the style attribute. */
.fs-send{white-space:nowrap;overflow:hidden;transition:width .5s cubic-bezier(.2,.7,.3,1),transform .3s cubic-bezier(.2,.7,.3,1),background-color .35s ease,border-color .35s ease,box-shadow .3s ease}
.fs-send__idle,.fs-send__done{display:inline-flex;align-items:center;gap:14px}
.fs-send__done{display:none;color:#FBF3E4}
.fs-send.is-sent{background:#2A1F14!important;border-color:#C99A4E!important;padding-left:42px!important;padding-right:42px!important;cursor:default}
.fs-send.is-sent:hover{transform:none}
.fs-send.is-sent .fs-send__idle{display:none}
.fs-send.is-sent .fs-send__done{display:inline-flex;animation:fsSendIn .4s ease .12s both}
.fs-send__check{width:20px;height:20px;flex:none;fill:none;stroke:#E3C48F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fs-send__check circle{stroke-width:1.4;stroke-dasharray:60;stroke-dashoffset:60}
.fs-send__check path{stroke-dasharray:13;stroke-dashoffset:13}
.fs-send.is-sent .fs-send__check circle{animation:fsDraw .5s cubic-bezier(.65,0,.35,1) .15s forwards}
.fs-send.is-sent .fs-send__check path{animation:fsDraw .3s cubic-bezier(.65,0,.35,1) .6s forwards}
@keyframes fsDraw{to{stroke-dashoffset:0}}
@keyframes fsSendIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fs-send{transition:none}.fs-send.is-sent .fs-send__done{animation:none}.fs-send__check circle,.fs-send__check path{stroke-dashoffset:0;animation:none!important}}
.fs-nav{display:flex}
.fs-lang{display:flex;align-items:center;gap:4px;margin-left:clamp(14px,1.6vw,26px);font-size:12.5px;letter-spacing:.14em}
.fs-lang a{padding:6px 7px;color:rgba(242,235,222,.6);text-shadow:0 1px 10px rgba(12,8,5,.5);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.fs-lang a:hover{color:#F2EBDE}
.fs-lang a[aria-current]{color:#F2EBDE;border-bottom-color:#C99A4E}
.fs-moblang{display:flex;justify-content:center;gap:10px;margin-top:22px;font-size:14px;letter-spacing:.14em}
.fs-moblang a{padding:8px 12px;color:rgba(240,233,220,.6);border:1px solid transparent}
.fs-moblang a[aria-current]{color:#F0E9DC;border-color:rgba(240,233,220,.4)}
.fs-burger{display:none}


/* Mobile menu: a drawer over the page, not a block that pushes it down. */
#fs-mobmenu{position:fixed;top:0;right:0;z-index:60;
  display:flex;flex-direction:column;gap:2px;
  width:min(264px,76vw);height:100dvh;padding:18px 18px 26px;
  background:rgba(13,9,6,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-left:1px solid rgba(240,233,220,.16);
  box-shadow:-18px 0 44px rgba(0,0,0,.42);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),visibility 0s linear .32s}
#fs-mobmenu.is-open{visibility:visible;transform:none;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),visibility 0s}
#fs-mobmenu a{border-bottom:1px solid rgba(240,233,220,.10)}
#fs-mobmenu a:last-child{border-bottom:0}
.fs-mobclose{align-self:flex-end;width:42px;height:42px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid rgba(240,233,220,.28);
  color:#F0E9DC;font-size:22px;line-height:1;cursor:pointer;
  transition:border-color .3s ease,background-color .3s ease}
.fs-mobclose:hover{border-color:#F0E9DC;background:rgba(247,241,230,.08)}
.fs-scrim{position:fixed;inset:0;z-index:55;background:rgba(10,7,5,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
@media (max-width:1000px){
  .fs-nav{display:none}
  .fs-lang{display:none}
  .fs-burger{display:flex}
  .fs-navcta{display:none!important}
  .fs-conn{display:none!important}
  .fs-proc{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* The three features in the header use all the available width. */
  .fs-feat{max-width:none!important;gap:clamp(8px,2vw,24px)!important}
  /* Footer: logo and e-mail at the top, links and copyright below. */
  .fs-footrow{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center!important;gap:22px 32px!important}
  .fs-footrow>a:first-child{order:0}
  .fs-footmail{order:1;margin-left:0!important;justify-self:end}
  .fs-footlinks{order:2;margin-left:0!important;flex-wrap:wrap}
  .fs-footcopy{order:3;justify-self:end;text-align:right}
}
@media (max-width:820px){.fs-split{grid-template-columns:minmax(0,1fr)!important;gap:26px!important}}
/* Form fields in two columns: a label wrapped onto two lines must not
   push its field lower than the neighbouring one, so the text sits at the bottom
   of the label and the fields are aligned. */
.fs-form2>label{grid-template-rows:1fr auto}
.fs-form2>label>span:first-child{align-self:end}
@media (max-width:760px){
  /* The darkened mountain photo stays the only header background; the header
     grows with the content instead of squeezing it. */
  .fs-heroimg{opacity:.34}
  .fs-hero{min-height:clamp(560px,100svh,880px)!important}
  .fs-band{min-height:0!important}
  .fs-bandimg{opacity:.32!important}
}
@media (max-width:600px){
  .fs-form2{grid-template-columns:minmax(0,1fr)!important}
  .fs-footrow{grid-template-columns:minmax(0,1fr)!important;justify-items:start;gap:18px!important}
  .fs-footmail,.fs-footcopy{justify-self:start;text-align:left}
  .fs-footcopy{width:100%;padding-top:18px;border-top:1px solid rgba(32,31,29,.12)}
}
@media (max-width:560px){
  /* Header on phones: a slightly larger logo, more air between elements. */
  .fs-herologo{height:96px!important}
  .fs-herobody{padding-top:40px!important;padding-bottom:48px!important}
  .fs-herobody h1{margin-bottom:22px!important}
  .fs-herobody p{margin-bottom:32px!important}
  .fs-btns{flex-direction:column!important;align-items:stretch!important;margin-bottom:44px!important}
  /* The three advantages stay in one compact row. */
  .fs-feat{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important}
  .fs-feat>div{padding:0 6px!important;gap:10px!important}
  .fs-feat .fs-ico{width:30px!important;height:30px!important}
  .fs-feat>div>div{font-size:12.5px!important;line-height:1.4!important}
  /* Process: two columns instead of one long one. */
  .fs-proc{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:34px 16px!important}
}

/* --- section kicker: subtle but readable; shared by all sections --- */
.fs-kick{font-size:13px;letter-spacing:.22em;line-height:1;text-transform:uppercase}

/* --- offer: three cards ---
   On a wide screen the card rows are aligned with subgrid, so prices
   and lists start at the same height regardless of the description length. */
.fs-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(18px,2vw,30px);row-gap:0}
.fs-offer{display:grid;grid-row:span 6;grid-template-rows:subgrid;align-content:start;border:1px solid #DED6C6;background:#FCFAF4;padding:clamp(26px,2.6vw,42px)}
.fs-offer__ico{width:clamp(60px,5vw,72px);height:clamp(60px,5vw,72px);background:#EEE6D6;display:flex;align-items:center;justify-content:center;margin-bottom:clamp(20px,2vw,28px)}
.fs-offer__ico img{width:62%;height:62%}
.fs-offer__title{font-family:'Cormorant Garamond',Garamond,serif;font-weight:500;font-size:clamp(24px,1.9vw,30px);line-height:1.18;letter-spacing:-.005em;margin:0 0 10px}
.fs-offer__lead{font-size:15px;line-height:1.7;color:rgba(32,31,29,.75);margin:0 0 clamp(20px,2vw,26px)}
.fs-offer__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0;padding-top:clamp(18px,1.8vw,24px);border-top:1px solid rgba(32,31,29,.14)}
.fs-offer__amount{font-family:'Cormorant Garamond',Garamond,serif;font-weight:500;font-size:clamp(32px,2.6vw,40px);line-height:1;color:#201F1D;white-space:nowrap}
.fs-offer__per{font-size:14px;color:rgba(32,31,29,.66)}
.fs-offer__note{font-size:13.5px;line-height:1.65;color:rgba(32,31,29,.68);margin:10px 0 clamp(22px,2.2vw,28px)}
.fs-offer__note strong{font-weight:500;color:#201F1D}
.fs-checks{list-style:none;margin:0;padding:0;display:grid;gap:11px;align-content:start}
.fs-checks li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.55;color:rgba(32,31,29,.82)}
.fs-checks li::before{content:'';position:absolute;left:2px;top:.36em;width:10px;height:5px;border-left:1.5px solid #8f6427;border-bottom:1.5px solid #8f6427;transform:rotate(-45deg)}
.fs-checks li.fs-out{color:rgba(32,31,29,.64)}
.fs-checks li.fs-out::before,.fs-checks li.fs-out::after{content:'';position:absolute;left:2px;top:.78em;width:11px;height:1.5px;border:0;background:rgba(32,31,29,.42);transform:rotate(45deg)}
.fs-checks li.fs-out::after{transform:rotate(-45deg)}
.fs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- why us: four short arguments, no cards --- */
/* The text sits in the middle between the lines (equal spacing top and bottom, no gap
   between rows), and the diamond is aligned to the middle of the text with flex - and slightly
   raised, because the optical centre of a serif typeface lies above the centre of the line. */
.fs-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,44px)}
.fs-why li{display:flex;align-items:center;gap:14px;padding:clamp(14px,1.3vw,18px) 0;border-top:1px solid rgba(247,241,230,.18);font-size:clamp(15px,1.05vw,17px);line-height:1.4;color:rgba(243,236,224,.9)}
.fs-why li:nth-last-child(-n+2){border-bottom:1px solid rgba(247,241,230,.18)}
.fs-why li::before{content:'';flex:none;width:6px;height:6px;margin-left:2px;border:1px solid #C99A4E;transform:translateY(-2px) rotate(45deg)}

@media (max-width:1080px){
  .fs-offers{grid-template-columns:minmax(0,1fr);row-gap:clamp(18px,3vw,26px);max-width:780px}
  .fs-offer{grid-row:auto;grid-template-rows:none}
  .fs-checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
}
@media (max-width:620px){
  .fs-checks{grid-template-columns:minmax(0,1fr)}
  .fs-why{grid-template-columns:minmax(0,1fr)}
  .fs-why li:nth-last-child(2){border-bottom:0}
  .fs-kick{font-size:12px}
}

/* --- hover states (in the design file they were style-hover attributes) --- */
.fsh-1:hover{color:#E3C48F}
.fsh-2:hover{color:#E3C48F}
.fsh-3:hover{color:#E3C48F}
.fsh-4:hover{background:rgba(247,241,230,.1);border-color:#F7F1E6}
.fsh-5:hover{background:#FBF6EC}
.fsh-6:hover{background:rgba(247,241,230,.09);border-color:#F7F1E6}
.fsh-7:hover{color:#E3C48F}
.fsh-8:hover{background:#2E2013;border-color:#EEDFC6}
.fsh-9:hover{color:#8f6427}
.fsh-10:hover{color:#B68235}
.fsh-11:hover{color:#B68235}

/* --- studio phone (shown only when it is set) --- */
.fs-phone{display:flex;margin-top:16px;color:#F6EEDD;font-size:15.5px;line-height:1;padding-left:44px}

/* --- showcase: a compact logo grid right before the footer ---
   Every logo has two layers: a monochrome one (colour from CSS, shape from the PNG alpha
   channel through mask-image) and the original. Normally a uniform brown is visible,
   on hover the original colours. The PNG file stays untouched. */
.fs-real{background:#F8F5ED;padding:clamp(56px,6.4vw,104px) clamp(20px,4.5vw,72px) clamp(48px,5.6vw,88px)}
.fs-real__in{max-width:1560px;margin:0 auto}
.fs-real__kick{display:flex;align-items:center;gap:16px;margin-bottom:clamp(26px,3.2vw,46px)}
.fs-real__rule{display:block;width:clamp(36px,4vw,54px);height:1px;background:rgba(32,31,29,.4)}
.fs-real__kick .fs-kick{color:rgba(32,31,29,.7)}
.fs-real__title{font-family:'Cormorant Garamond',Garamond,serif;font-weight:400;font-size:clamp(32px,3.7vw,52px);line-height:1.1;letter-spacing:-.01em;margin:0 0 clamp(26px,3.2vw,46px);color:#201F1D}
.fs-real__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.1vw,18px)}
@media (min-width:560px){.fs-real__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:820px){.fs-real__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1080px){.fs-real__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1320px){.fs-real__grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:1600px){.fs-real__grid{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (min-width:1900px){.fs-real__grid{grid-template-columns:repeat(8,minmax(0,1fr))}}
.fs-real__tile{display:block;aspect-ratio:4/3;padding:8%;border-radius:4px}
.fs-real__img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) sepia(.75) contrast(1.1);opacity:.92;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s ease,opacity .45s ease}
.fs-real__tile:hover .fs-real__img,.fs-real__tile:focus-visible .fs-real__img{transform:scale(1.06);filter:none;opacity:1}
.fs-real__tile:focus-visible{outline:2px solid #8F6427;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fs-real__img{transition:none}.fs-real__tile:hover .fs-real__img,.fs-real__tile:focus-visible .fs-real__img{transform:none}}
@media (hover:none){.fs-real__img{filter:none;opacity:1}}

/* --- content entrance on scroll ([data-fs-up]) ---
   Only the script hides content (the fs-wait class), and only what is still below
   the screen, so without JS everything is visible. fs-go carries the transition only for
   the entrance, after which the element's own transition returns (e.g. card hover).
   The kicker line draws the same way as with .fs-hidden. */
.fs-wait{opacity:0;transform:translateY(20px)}
.fs-go{transition:opacity .6s cubic-bezier(.2,.7,.3,1) var(--fs-d,0ms),transform .6s cubic-bezier(.2,.7,.3,1) var(--fs-d,0ms)!important}
.fs-wait .fs-rule{transform:scaleX(0)}
/* Process: connectors draw from the left (clip-path instead of scaleX, so the diamond
   and the arrowhead are not distorted), step icons settle a moment after the text. */
.fs-conn.fs-wait{transform:none;clip-path:inset(-8px 100% -8px -8px)}
.fs-conn.fs-go{clip-path:inset(-8px);transition:clip-path .55s cubic-bezier(.65,0,.35,1) var(--fs-d,0ms)!important}
.fs-step.fs-go .fs-sico{animation:fsIcoIn .8s cubic-bezier(.2,.7,.3,1) calc(var(--fs-d,0ms) + 120ms) both}
@keyframes fsIcoIn{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fs-wait{opacity:1;transform:none;clip-path:none}.fs-step.fs-go .fs-sico{animation:none}}

/* --- navigation: a thin gold line under the link on hover --- */
.fs-nav a{position:relative}
.fs-nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#C99A4E;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.fs-nav a:hover::after,.fs-nav a:focus-visible::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.fs-nav a::after{transition:none}}