/* ============================================================
   Tilen TP — tilentp.com
   Design tokens → base → layout → components → sections
   ============================================================ */

:root{
  /* ---- colour ---- */
  --bg:            #08090B;
  --bg-alt:        #0B0D11;
  --surface:       rgba(255,255,255,.032);
  --surface-2:     rgba(255,255,255,.055);
  --line:          rgba(255,255,255,.10);
  --line-strong:   rgba(255,255,255,.20);

  --text:          #F2F3F5;
  --text-2:        #A8ADB7;
  --text-3:        #7C828C;

  --accent:        #5C8CFF;   /* links / accents on dark */
  --accent-solid:  #2F63E8;   /* button fill */
  --accent-hover:  #3B72F5;
  --accent-glow:   rgba(92,140,255,.30);
  --accent-faint:  rgba(92,140,255,.10);

  --danger:        #FF8080;

  /* ---- type ---- */
  --font-display: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-eyebrow: .75rem;
  --fs-body:    clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-lead:    clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  --fs-h3:      clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --fs-h2:      clamp(1.875rem, 1.5rem + 1.7vw, 3rem);
  --fs-h1:      clamp(2.5rem, 1.75rem + 3.6vw, 4.75rem);

  /* ---- space & shape ---- */
  --wrap:       1180px;
  --gutter:     clamp(1.25rem, 4.5vw, 2.5rem);
  --section-y:  clamp(4.5rem, 9vw, 8.5rem);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --header-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================ base ============================ */

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle film grain over the whole page */
body::after{
  content:"";
  position:fixed; inset:0; z-index:9999;
  pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); letter-spacing:-.03em; }
h3{ font-size:var(--fs-h3); letter-spacing:-.02em; line-height:1.2; }
p{ margin:0; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:#89ABFF; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--accent-solid); color:#fff;
  padding:.75rem 1.25rem; border-radius:0 0 var(--r-sm) 0; font-weight:600;
}
.skip-link:focus{ left:0; color:#fff; }

/* ============================ header ============================ */

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  background:rgba(8,9,11,0);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
.site-header.is-stuck{
  background:rgba(8,9,11,.78);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.header-inner{
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{
  display:inline-flex; align-items:center;
  margin-left:-2px; padding:.25rem 0;
}
.brand-logo{
  height:40px; width:auto;
  transition:opacity .25s var(--ease), filter .25s var(--ease);
}
.brand:hover .brand-logo{
  opacity:1;
  filter:drop-shadow(0 0 12px var(--accent-glow));
}
@media (min-width:860px){ .brand-logo{ height:48px; } }

.nav-desktop{ display:none; align-items:center; gap:2rem; }
.nav-desktop a:not(.btn){
  color:var(--text-2); font-size:.9375rem; font-weight:500;
  position:relative; padding-block:.35rem;
}
.nav-desktop a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-desktop a:not(.btn):hover,
.nav-desktop a:not(.btn).is-active{ color:var(--text); }
.nav-desktop a:not(.btn):hover::after,
.nav-desktop a:not(.btn).is-active::after{ transform:scaleX(1); }

.nav-toggle{
  width:44px; height:44px; margin-right:-10px;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--text);
}
.nav-toggle-bars{ display:block; width:22px; }
.nav-toggle-bars i{
  display:block; height:1.5px; background:currentColor; border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s;
}
.nav-toggle-bars i:first-child{ margin-bottom:6px; }
.nav-toggle[aria-expanded="true"] i:first-child{ transform:translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child{ transform:translateY(-3.75px) rotate(-45deg); }

.nav-mobile[hidden]{ display:none; }
.nav-mobile{
  display:flex; flex-direction:column;
  padding:.5rem var(--gutter) 1.5rem;
  background:rgba(8,9,11,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-mobile a{
  color:var(--text); font-family:var(--font-display); font-weight:600;
  font-size:1.375rem; letter-spacing:-.02em;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.nav-mobile a:last-child{ border-bottom:0; }

/* ============================ buttons ============================ */

.btn{
  --btn-py:.9rem; --btn-px:1.6rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:var(--btn-py) var(--btn-px);
  border-radius:var(--r-pill);
  font-family:var(--font-body); font-weight:600; font-size:.9375rem;
  letter-spacing:.005em; line-height:1;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .3s;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ --btn-py:.7rem; --btn-px:1.15rem; font-size:.875rem; }
.btn-block{ width:100%; }

.btn-primary{
  background:var(--accent-solid); color:#fff;
  box-shadow:0 6px 26px -10px var(--accent-glow);
}
.btn-primary:hover{ background:var(--accent-hover); color:#fff; box-shadow:0 10px 34px -10px var(--accent-glow); }

.btn-ghost{
  background:var(--surface); color:var(--text); border-color:var(--line-strong);
}
.btn-ghost:hover{ background:var(--surface-2); border-color:rgba(255,255,255,.34); color:var(--text); }

/* external-link glyph */
.ext{
  width:.65em; height:.65em; flex:none;
  border-top:1.6px solid currentColor; border-right:1.6px solid currentColor;
  transform:rotate(45deg) translateY(.1em);
  opacity:.7;
}

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:600; font-size:.9375rem; margin-top:auto; padding-top:.5rem;
}
.link-arrow .arr{
  width:.55em; height:.55em; flex:none;
  border-top:1.7px solid currentColor; border-right:1.7px solid currentColor;
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
}
.link-arrow:hover .arr{ transform:rotate(45deg) translate(3px,-3px); }

/* ============================ section furniture ============================ */

.section{ padding-block:var(--section-y); position:relative; }
.section-alt{ background:var(--bg-alt); border-block:1px solid var(--line); }

.eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-size:var(--fs-eyebrow); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1.1rem;
}
.eyebrow-rule{
  width:28px; height:1px; background:currentColor; opacity:.55; flex:none;
}

.section-head{ max-width:44ch; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head-left{ margin-bottom:1.75rem; }
.section-lead{
  color:var(--text-2); font-size:var(--fs-lead); line-height:1.55;
  margin-top:1.1rem; max-width:52ch; text-wrap:pretty;
}

/* ============================ hero ============================ */

.hero{
  position:relative;
  padding-top:calc(var(--header-h) + clamp(3rem,9vw,6.5rem));
  padding-bottom:clamp(3.5rem,8vw,7rem);
  overflow:hidden;
}
.hero-glow{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  pointer-events:none;
  background:
    radial-gradient(48% 42% at 22% 26%, rgba(92,140,255,.20), transparent 70%),
    radial-gradient(42% 40% at 82% 62%, rgba(255,150,80,.10), transparent 72%);
  filter:blur(6px);
}
.hero-grid{
  position:relative;
  display:grid; gap:clamp(2.5rem,6vw,4rem);
  align-items:center;
}

h1 .amp{ color:var(--text-3); font-weight:600; }
h1 .h1-line2{ display:inline; }
@media (min-width:520px){ h1 .h1-line2{ display:block; } }

.lead{
  color:var(--text-2); font-size:var(--fs-lead); line-height:1.55;
  margin-top:1.5rem; max-width:50ch; text-wrap:pretty;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }

.hero-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem;
  list-style:none; margin:2.5rem 0 0; padding:2rem 0 0;
  border-top:1px solid var(--line);
  font-size:.8125rem; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-3);
}
.hero-meta li{ display:flex; align-items:center; gap:.6rem; }
.hero-meta li::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:.8; flex:none;
}

.hero-figure{
  margin:0; position:relative;
  max-width:420px; width:100%; justify-self:center;
}
.hero-figure::before{
  content:""; position:absolute; inset:8% 2% -5% 4%;
  background:radial-gradient(60% 60% at 50% 50%, var(--accent-glow), transparent 70%);
  filter:blur(38px); z-index:-1;
}
.hero-figure img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--line-strong);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}

/* ============================ shorts ============================ */

.shorts-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1rem,2.4vw,1.75rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.short-frame{
  position:relative; aspect-ratio:9/16;
  border-radius:var(--r-md); overflow:hidden;
  background:#0F1218; border:1px solid var(--line);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.short-frame:hover{
  border-color:var(--line-strong);
  transform:translateY(-4px);
  box-shadow:0 26px 50px -30px rgba(0,0,0,.95);
}
.short-play{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; background:none; cursor:pointer; display:block;
}
.short-thumb{
  width:100%; height:100%; object-fit:cover;
  opacity:.86; transition:opacity .35s var(--ease), transform .5s var(--ease);
}
.short-play:hover .short-thumb{ opacity:1; transform:scale(1.03); }
.short-play::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,11,.15) 0%, rgba(8,9,11,0) 40%, rgba(8,9,11,.55) 100%);
}
.short-icon{
  position:absolute; top:50%; left:50%; translate:-50% -50%; z-index:1;
  width:64px; height:64px; border-radius:50%;
  background:rgba(12,14,18,.55);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:grid; place-items:center;
  transition:background-color .25s, scale .25s var(--ease);
}
.short-icon::before{
  content:""; display:block;
  border-left:15px solid #fff;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  margin-left:4px;
}
.short-play:hover .short-icon{ background:var(--accent-solid); border-color:transparent; scale:1.06; }
.short-meta{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  margin-top:.9rem; padding-inline:.15rem;
}
.short-name{
  font-family:var(--font-body); font-size:.9375rem; font-weight:600;
  letter-spacing:0; line-height:1.35; color:var(--text); margin:0;
}
.short-link{
  display:inline-flex; align-items:center; gap:.35rem; flex:none;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3);
}
.short-link:hover{ color:var(--accent); }
.short-thumb.is-missing{ display:none; }
.short-thumb.is-fallback{ object-fit:contain; background:#0F1218; }
.short-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ============================ release panels ============================ */

.release-title{ color:var(--text); font-weight:600; }
.release-title em{ font-style:italic; }
.release-meta{
  display:inline-block; margin-left:.75rem; vertical-align:2px;
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.25rem .6rem;
}

.release-grid{
  display:grid; gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:1fr;
}
.panel{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:1rem;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.25rem,3vw,2rem);
}
.panel-title{ font-size:1.125rem; }
.panel-text{ color:var(--text-2); font-size:.9375rem; max-width:46ch; }
.panel .btn{ margin-top:auto; }
.embed{ width:100%; border-radius:var(--r-md); overflow:hidden; background:#0F1218; }
.embed iframe{ width:100%; border:0; display:block; }
.embed-spotify iframe{ height:352px; }
.embed-bandcamp iframe{ height:120px; }

/* ============================ services ============================ */

.services-grid{
  display:grid; gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:1fr;
}
.card{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.5rem,3.4vw,2.5rem);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.card:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.card-index{
  font-family:var(--font-display); font-weight:600; font-size:.8125rem;
  letter-spacing:.14em; color:var(--accent); margin-bottom:1.25rem;
}
.card h3{ margin-bottom:.9rem; }
.card-text{ color:var(--text-2); font-size:.9688rem; max-width:44ch; }

.tag-list{
  list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin:1.75rem 0; padding:0;
}
.tag-list li{
  font-size:.8125rem; font-weight:500; color:var(--text-2);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.4rem .85rem;
}

/* ============================ about ============================ */

.about-grid{ display:grid; gap:clamp(2.25rem,5vw,4rem); align-items:start; }
.about-side{ display:grid; gap:clamp(1.25rem,2.5vw,1.5rem); }
.about-figure{ margin:0; position:relative; }
.about-figure::before{
  content:""; position:absolute; inset:auto 3% -5% 3%; height:55%;
  background:radial-gradient(60% 60% at 50% 60%, var(--accent-glow), transparent 70%);
  filter:blur(34px); z-index:-1;
}
.about-figure img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--line-strong);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9);
}
.prose p{ color:var(--text-2); max-width:60ch; }
.prose p + p{ margin-top:1.15rem; }

.facts{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.25rem,3vw,1.75rem);
}
.facts dl{ margin:0; display:grid; gap:0; }
.facts div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--line);
}
.facts div:last-child{ border-bottom:0; padding-bottom:0; }
.facts div:first-child{ padding-top:0; }
.facts dt{
  font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); flex:none;
}
.facts dd{ margin:0; text-align:right; font-weight:500; font-size:.9375rem; }

/* ============================ contact ============================ */

.contact{ position:relative; overflow:hidden; border-top:1px solid var(--line); }
.contact-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(8,9,11,.94) 0%, rgba(8,9,11,.88) 45%, rgba(8,9,11,.97) 100%),
    url("../img/tilen-wide.jpg");
  background-size:cover;
  background-position:24% 42%;
  background-repeat:no-repeat;
}
.contact .wrap{ position:relative; }
.contact-grid{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
.contact-direct{ margin-top:1.5rem; color:var(--text-2); font-size:.9375rem; }

.form{
  background:rgba(13,15,19,.72);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.35rem,3.4vw,2.25rem);
  display:grid; gap:1.15rem;
}
.field{ display:grid; gap:.45rem; }
.field label{
  font-size:.75rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3);
}
.field input,
.field textarea,
.field select{
  width:100%; font:inherit; font-size:.9375rem; color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:.8rem .9rem;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
  appearance:none;
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.field input::placeholder,
.field textarea::placeholder{ color:var(--text-3); }
.field input:hover,
.field textarea:hover,
.field select:hover{ border-color:var(--line-strong); }
.field input:focus,
.field textarea:focus,
.field select:focus{
  outline:none; border-color:var(--accent);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px var(--accent-faint);
}
.field select{ cursor:pointer; }
.field select option{ background:#12151B; color:var(--text); }

.select-wrap{ position:relative; }
.select-arrow{
  position:absolute; right:1rem; top:50%; translate:0 -70%;
  width:.5rem; height:.5rem; pointer-events:none;
  border-right:1.6px solid var(--text-3); border-bottom:1.6px solid var(--text-3);
  rotate:45deg;
}

.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select{ border-color:var(--danger); }
.error{ color:var(--danger); font-size:.8125rem; }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ font-size:.875rem; color:var(--text-2); min-height:1.25rem; }
.form-status.is-ok{ color:#7BE0A8; }
.form-status.is-err{ color:var(--danger); }

/* ============================ footer ============================ */

.site-footer{
  border-top:1px solid var(--line);
  padding-top:clamp(3rem,6vw,4.5rem);
  background:var(--bg-alt);
}
.footer-grid{
  display:grid; gap:2.5rem;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.footer-logo{ width:clamp(190px,44vw,250px); height:auto; }
.footer-tag{ color:var(--text-2); font-size:.9375rem; margin-top:1.25rem; max-width:34ch; }

/* ---- social buttons ---- */
.socials{
  list-style:none; display:flex; flex-wrap:wrap; gap:.65rem;
  margin:1.75rem 0 0; padding:0;
}
.socials a{
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  color:var(--text-2);
  background:var(--surface);
  border:1px solid var(--line);
  transition:color .25s var(--ease), border-color .25s var(--ease),
             background-color .25s var(--ease), transform .25s var(--ease);
}
.socials svg{ width:21px; height:21px; }
.socials a:hover{
  color:#fff;
  background:var(--accent-solid);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 8px 22px -10px var(--accent-glow);
}

.footer-h{
  font-family:var(--font-body); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  margin:0 0 1rem;
}
.footer-nav, .footer-links{ display:flex; flex-direction:column; align-items:flex-start; gap:.65rem; }
.footer-nav a, .footer-links a{
  color:var(--text-2); font-size:.9375rem;
  display:inline-flex; align-items:center; gap:.4rem;
}
.footer-nav a:hover, .footer-links a:hover{ color:var(--text); }

.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  padding-block:1.5rem; border-top:1px solid var(--line);
  font-size:.8125rem; color:var(--text-3);
}
.footer-bottom a{ color:var(--text-3); }
.footer-bottom a:hover{ color:var(--text); }

/* ============================ breakpoints ============================ */

/* phones: shorts become an edge-to-edge swipe row so the page stays short */
@media (max-width:639px){
  .shorts-grid{
    display:flex; gap:.85rem;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding:0 var(--gutter) .25rem;
  }
  .shorts-grid::-webkit-scrollbar{ display:none; }
  .short{ flex:0 0 74%; scroll-snap-align:start; }
  .short-frame:hover{ transform:none; }
}

@media (min-width:640px){
  .release-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:860px){
  .nav-desktop{ display:flex; }
  .nav-toggle{ display:none; }
  .nav-mobile{ display:none !important; }

  .hero-grid{ grid-template-columns:1.1fr .9fr; }
  .hero-figure{ justify-self:end; max-width:400px; }

  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1.25fr .75fr; }
  .contact-grid{ grid-template-columns:.95fr 1.05fr; }

  .footer-grid{ grid-template-columns:1.6fr .7fr 1fr; gap:3rem; }
}

@media (min-width:1080px){
  .hero-figure{ max-width:440px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}