/* Çınar Tattoo, the public page. A port of the approved "Dergi" prototype: one plain palette (the
   tokens below; the red dot is the only accent), Instrument Serif for display and Manrope for text.

   Motion: site.js (anime.js) moves the page. The states things start from before they move are here,
   only for visitors whose browser runs scripts and who do not ask for reduced motion. Each of those
   states also runs `kurtar` after 4 s, so the page shows itself even if site.js never arrives or
   fails. site.js adds html.m just before it starts the entrance, which stops `kurtar` and leaves the
   elements to anime; when it starts too late (or the entrance fails) it adds html.still instead,
   which ends `kurtar` at once. */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/instrument-serif-400-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Oswald;font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/oswald-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Oswald;font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/oswald-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/manrope-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:dark;
  --bg: oklch(13% 0.004 80);
  --bg-2: oklch(18% 0.005 80);
  --bg-3: oklch(23% 0.006 80);
  --shade: oklch(8% 0.003 80);
  --fg: oklch(95% 0.01 85);
  --fg-2: oklch(80% 0.01 85);
  --mute: oklch(63% 0.008 85);
  --line: oklch(30% 0.006 80);
  --line-2: oklch(40% 0.006 80);
  --dot: oklch(60% 0.2 28);
  --logo-ground: #070604; /* the black the logo is drawn on */

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: Manrope, system-ui, sans-serif;
  --display-2: Oswald, "Arial Narrow", system-ui, sans-serif; /* the hero side texts */
  --g: clamp(1rem, 3.2vw, 2.75rem);
  --ease: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body.is-locked{overflow:hidden}
img,video,iframe,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,dl,dd,ol,ul{margin:0}
h1,h2,h3{font-weight:400}
ol,ul{list-style:none;padding:0}
button{font:inherit;color:inherit}
::selection{background:var(--fg);color:var(--bg)}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.page{max-width:1440px;margin:0 auto;padding-inline:var(--g)}
.lbl{font:600 .72rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.lbl b{color:var(--fg);font-weight:600}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dot);margin-right:.6em;vertical-align:.1em}
.num{font-variant-numeric:tabular-nums}

/* buttons: sharp, editorial */
.btn{display:inline-flex;align-items:center;gap:.7em;white-space:nowrap;text-decoration:none;cursor:pointer;
  font:600 .9rem/1 var(--sans);padding:1.05em 1.4em;border:1px solid var(--fg);background:var(--fg);color:var(--bg);border-radius:0;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn:hover{background:transparent;color:var(--fg)}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--fg)}
.btn .ar{transition:transform .3s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.link{color:var(--fg-2);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.15em;transition:background-size .4s var(--ease),color .2s}
.link:hover{color:var(--fg);background-size:0 1px;background-position:100% 100%}
.link-gap{margin-left:.4rem}

/* ============ INTRO: needle line, name, the year, then the page opens ============ */
.intro{position:fixed;inset:0;z-index:100;pointer-events:none;display:none}
.intro-half{position:absolute;left:0;right:0;height:50.5%;background:var(--shade);pointer-events:auto}
.intro-half.t{top:0}.intro-half.b{bottom:0}
.intro-line{position:absolute;left:var(--g);right:var(--g);top:50%;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left}
.intro-name{position:absolute;left:var(--g);bottom:50%;display:grid;justify-items:start}
/* each row is its own mask for the letters rising into it; the brand row's bottom padding holds the Ç's cedilla */
.intro-name .in-row{display:flex;overflow:hidden;padding:.12em 0 .16em}
.in-brand{font:400 clamp(3.6rem,11vw,11rem)/.8 var(--serif);letter-spacing:-.02em}
.in-place{font:500 clamp(2.4rem,7vw,7.6rem)/.85 var(--display-2);letter-spacing:.12em;color:var(--fg-2);margin-top:-.1em}
.intro-name .ch{display:inline-block;transform:translateY(105%)}
/* the services flash past one by one right under the line */
.intro-svc{position:absolute;left:var(--g);right:var(--g);top:calc(50% + max(1rem, 1.6vw));height:1.2em;margin:0;overflow:hidden;
  font:500 clamp(1.8rem,3.6vw,3.8rem)/1.1 var(--display-2);letter-spacing:.03em;text-transform:uppercase;color:var(--fg)}
.intro-svc span{position:absolute;left:0;top:0;white-space:nowrap;opacity:0}
/* under the services: the Instagram address, letter by letter */
.intro-ig{position:absolute;left:var(--g);top:calc(50% + max(1rem, 1.6vw) + clamp(2.8rem,5.2vw,5.4rem));display:flex;align-items:center;gap:.55em;margin:0;
  font:600 clamp(1.15rem,2.2vw,2rem)/1 var(--sans);letter-spacing:.03em;color:var(--fg);opacity:0}
.intro-ig .ig-ico{width:1.25em;height:1.25em;flex:none}
.in-ig-t{display:flex;overflow:hidden;padding:.12em 0}
.in-ig-t .ch{display:inline-block;transform:translateY(105%)}
.intro-year{position:absolute;right:var(--g);top:calc(50% + .6rem);font:400 clamp(2rem,5vw,4rem)/1 var(--serif);opacity:0}
.intro-skip{position:absolute;top:1.25rem;right:var(--g);background:none;border:1px solid var(--line-2);color:var(--fg-2);padding:.6em 1.1em;cursor:pointer;font-size:.8rem;pointer-events:auto}
.intro-skip:hover{color:var(--fg);border-color:var(--fg)}

/* ============ TOP BAR ============ */
.bar{position:fixed;z-index:60;top:0;left:0;right:0;transition:background-color .3s var(--ease)}
.bar.solid{background:color-mix(in oklch,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.bar-in{max-width:1440px;margin:0 auto;padding:.65rem var(--g);display:flex;align-items:center;gap:2rem;border-bottom:1px solid var(--line)}
.brand{display:grid;gap:.4rem;justify-items:start;margin-right:auto;min-width:0}
.mark{display:flex;align-items:baseline;gap:.7rem;text-decoration:none;white-space:nowrap}
.mark b{font:400 1.75rem/1 var(--serif);letter-spacing:0}
.mark span{font:600 .62rem/1 var(--sans);letter-spacing:.22em;color:var(--mute)}
/* the Instagram address under the name: a light passes over it every few seconds */
.mark-ig{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font:600 .74rem/1 var(--sans);letter-spacing:.05em;color:var(--fg)}
.mark-ig .ig-ico{width:.95rem;height:.95rem;flex:none}
.mark-ig-t{background:linear-gradient(100deg,var(--fg-2) 0 36%,var(--fg) 50%,var(--fg-2) 64% 100%) 100% 0/260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.mark-ig:hover .mark-ig-t{background:var(--fg);-webkit-background-clip:text;background-clip:text}
@keyframes ig-shine{0%{background-position:100% 0}28%,100%{background-position:0 0}}
@media (prefers-reduced-motion:no-preference){.mark-ig-t{animation:ig-shine 4.5s 3.2s infinite}}
.menu{display:flex;gap:1.6rem}
.menu a{text-decoration:none;font-size:.85rem;color:var(--fg-2);white-space:nowrap;display:flex;gap:.4em;align-items:baseline}
.menu a i{font:600 .62rem/1 var(--sans);font-style:normal;color:var(--mute);letter-spacing:.05em}
.menu a:hover,.menu a[aria-current="true"]{color:var(--fg)}
.menu a[aria-current="true"] i{color:var(--dot)}
.bar .btn{padding:.8em 1.1em;font-size:.82rem}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);padding:.7em 1em;font-size:.82rem;font-weight:600;cursor:pointer}
@media (max-width:1100px){.menu{display:none}.menu-btn{display:inline-block}.bar .btn{display:none}}

/* the announcement, under the bar */
.duyuru{display:flex;align-items:center;gap:1rem;max-width:1440px;margin:0 auto;padding:.55rem var(--g);background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.86rem;color:var(--fg-2)}
.duyuru p{flex:1;min-width:0;overflow-wrap:anywhere}
.duyuru p::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dot);margin-right:.6em;vertical-align:.1em}
.duyuru-kapat{flex:none;width:44px;height:44px;margin:-.4rem 0;background:none;border:0;cursor:pointer;color:var(--fg-2)}
.duyuru-kapat:hover{color:var(--fg)}
.duyuru[hidden]{display:none}

.sheet{position:fixed;inset:0;z-index:90;background:var(--shade);display:none;flex-direction:column;padding:5.5rem var(--g) 2rem;overflow-y:auto}
.sheet.open{display:flex}
.sheet>a{display:flex;align-items:baseline;gap:1rem;text-decoration:none;font:400 clamp(2.2rem,10vw,4rem)/1.15 var(--serif);border-bottom:1px solid var(--line);padding:.3rem 0}
.sheet>a i{font:600 .75rem/1 var(--sans);font-style:normal;color:var(--mute)}
.sheet-close{position:absolute;top:1rem;right:var(--g);background:none;border:1px solid var(--line-2);padding:.7em 1em;font-size:.82rem;font-weight:600;cursor:pointer}
.sheet-foot{margin-top:auto;display:flex;gap:.6rem;flex-wrap:wrap;padding-top:2rem}

/* ============ HERO: the shop's logo, whole and sharp, behind the start of the page ============ */
.hero-top{position:relative;isolation:isolate;background:linear-gradient(to bottom,var(--logo-ground) 0,var(--logo-ground) calc(100svh - 6rem),var(--bg) 100%)}
/* desktop: the sign starts under the bar and grows until the anchor's tip (77% of its height, kept above the fade)
   meets the fold; only the bottom ornament border runs past it and fades into the black */
.hero-sign{position:relative;height:100svh;overflow:hidden;padding-top:4rem}
.hero-sign img{display:block;margin:0 auto;width:min(100%,calc((100svh - 4rem) * 1.2));height:auto}
.hero-sign::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4svh;background:linear-gradient(transparent,var(--logo-ground));pointer-events:none}
/* seed hero: the studio photo behind the square logo, dimmed and dark at the edges (as on nikkohurtado.com) so it
   does not pull the eye; the logo's own edges fade into it instead of hitting the eye as a hard gold square */
.hero-sign.stage{display:grid;place-items:center;isolation:isolate;padding-bottom:2rem}
.hero-sign.stage::after{display:none}
.hero-sign.stage .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-sign.stage .hero-bg picture{display:contents}
.hero-sign.stage .hero-bg img{display:block;margin:0;width:100%;height:100%;object-fit:cover;object-position:40% 42%;filter:brightness(.5) saturate(.75)}
.hero-sign.stage .hero-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 72% 78% at 50% 50%,transparent 30%,color-mix(in oklch,var(--logo-ground) 92%,transparent) 100%),
             linear-gradient(to bottom,color-mix(in oklch,var(--logo-ground) 70%,transparent),transparent 22%,transparent 70%,var(--logo-ground))}
.hero-sign.stage #heroLogo{width:min(100%,calc(100svh - 6rem));height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent,var(--logo-ground) 5%,var(--logo-ground) 95%,transparent),linear-gradient(to bottom,transparent,var(--logo-ground) 5%,var(--logo-ground) 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,var(--logo-ground) 5%,var(--logo-ground) 95%,transparent),linear-gradient(to bottom,transparent,var(--logo-ground) 5%,var(--logo-ground) 95%,transparent);
  mask-composite:intersect}
.has-duyuru .hero-sign.stage #heroLogo{width:min(100%,calc(100svh - 9rem))}
/* the small card under the logo: what the shop does and where it is, readable on arrival */
.hero-sign:has(.hero-info){display:grid;justify-items:center;align-content:center;gap:1rem}
.hero-sign:has(.hero-info) #heroLogo{width:min(100%,calc(100svh - 12rem))}
.has-duyuru .hero-sign:has(.hero-info) #heroLogo{width:min(100%,calc(100svh - 15rem))}
/* phones and narrow desktops: one small card under the logo */
.hero-info{display:grid;gap:.3rem;justify-items:center;text-align:center;max-width:min(100%,46rem);padding:.7rem 1.1rem;
  background:color-mix(in oklch,var(--logo-ground) 72%,transparent);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hi-label{display:none}
.hi-what ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .5em;
  font:500 1.6rem/1.2 var(--display-2);letter-spacing:.03em;text-transform:uppercase;color:var(--fg)}
.hi-what li:not(:last-child)::after{content:"·";margin-left:.5em}
.hi-place{font:400 1.15rem/1.4 var(--display-2);letter-spacing:.02em;color:var(--fg-2);overflow-wrap:anywhere}
.hi-place>*+*::before{content:" · "}
.hi-place>.hi-route::before{content:" "}
.hi-route{color:var(--fg);font-weight:600;white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--line-2)}
.hi-route:hover{border-bottom-color:var(--fg)}
/* wide desktops: services on the left of the logo, the address on its right, over the dimmed photo */
@media (min-width:1100px){
  .hero-sign:has(.hero-info) #heroLogo{width:min(100%,calc(100svh - 9rem))}
  .has-duyuru .hero-sign:has(.hero-info) #heroLogo{width:min(100%,calc(100svh - 12rem))}
  .hero-info{display:contents}
  .hi-what,.hi-where{position:absolute;top:calc(50% + 2rem);translate:0 -50%;display:grid;gap:1.2rem;
    width:calc((100% - min(100%, 100svh - 9rem)) / 2 - 2 * var(--g))}
  .hi-what{left:var(--g);justify-items:start;text-align:left}
  .hi-where{right:var(--g);justify-items:end;text-align:right}
  .hi-label{display:block;font:500 clamp(1rem,1.1vw,1.3rem)/1.2 var(--display-2);letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
  .hi-what ul{display:grid;gap:.8rem;justify-content:start;font:500 clamp(2rem,2.6vw,3.6rem)/.98 var(--display-2);letter-spacing:.01em;text-transform:uppercase}
  .hi-what li:not(:last-child)::after{content:none}
  .hi-what,.hi-where{text-shadow:0 1px 14px var(--logo-ground),0 0 3px var(--logo-ground)}
  .hi-place{display:grid;gap:.8rem;justify-items:end;font:400 clamp(1.4rem,2.1vw,2.5rem)/1.25 var(--display-2);letter-spacing:.01em}
  .hi-place>*+*::before,.hi-place>.hi-route::before{content:none}
  .hi-addr{max-width:20ch}
  .hi-hours{font:500 clamp(2rem,3vw,4.4rem)/1 var(--display-2);color:var(--fg);white-space:nowrap}
  .hi-route{font-family:var(--display-2);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:.9em}
}
.hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:end;padding-block:clamp(1.5rem,4vh,2.5rem) clamp(1rem,3vh,2rem)}
.hero-copy{grid-column:1/span 8;display:grid;gap:1rem;min-width:0}
.hero h1{font:400 clamp(2.6rem,5.4vw,5.6rem)/.9 var(--serif);letter-spacing:-.02em}
.hero h1 .ln{display:block;overflow:hidden;padding:.12em 0 .08em;margin:-.12em 0 -.08em}
.hero h1 .ln>span{display:inline-block;max-width:100%;overflow-wrap:anywhere}
.hero h1 em{font-style:italic;color:var(--fg-2)}
.hero-side{grid-column:9/span 4;display:grid;gap:1.2rem;justify-items:start;min-width:0}
.hero-sub{max-width:40ch;color:var(--fg-2);font-size:clamp(.95rem,1.1vw,1.05rem)}
.hero-act{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* with an announcement under the bar, the logo starts below both, so nothing covers it */
.has-duyuru .hero-sign{padding-top:7rem}
.has-duyuru .hero-sign img{width:min(100%,calc((100svh - 7rem) * 1.2))}
@media (max-width:900px){
  .has-duyuru .hero-sign{padding-top:8rem}
  .has-duyuru .hero-sign img{width:100%}
  .hero-top{background:linear-gradient(to bottom,var(--logo-ground) 0,var(--logo-ground) 60%,var(--bg) 100%)}
  .hero-sign{height:auto;padding-top:4.2rem}
  .hero-sign::after{display:none}
  .hero-sign img{height:auto;width:100%}
  .hero-copy,.hero-side{grid-column:1/-1}
  .hero-sign.stage{padding-bottom:1.5rem}
  .hero-sign.stage #heroLogo,.has-duyuru .hero-sign.stage #heroLogo,.hero-sign:has(.hero-info) #heroLogo{width:min(84%,28rem)}
  .hero-info{margin-inline:var(--g)}
}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);margin-top:clamp(2.5rem,6vw,4.5rem)}
.facts.f3{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts.f2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fact{padding:1.1rem 1rem 1.2rem 0;display:grid;gap:.25rem;min-width:0}
.fact+.fact{padding-left:1rem;border-left:1px solid var(--line)}
.fact b{font:400 clamp(2rem,3.6vw,3.2rem)/1 var(--serif);font-weight:400;overflow-wrap:anywhere}
.fact span{font-size:.82rem;color:var(--mute)}
@media (max-width:700px){.facts,.facts.f3{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(3){padding-left:0;border-left:0}.facts.f4 .fact:nth-child(-n+2),.facts.f3 .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* the strip that scrolls sideways with the page */
.strip{margin-top:clamp(3rem,7vw,5rem);overflow-x:auto;border-block:1px solid var(--line);padding-block:clamp(1rem,2vw,1.5rem)}
.strip.drive{overflow:hidden}
.strip-track{display:flex;gap:clamp(.6rem,1.2vw,1rem);width:max-content;will-change:transform}
.strip figure{width:clamp(150px,17vw,250px);display:grid;grid-template-columns:minmax(0,1fr);gap:.5rem}
.strip .ph{aspect-ratio:3/4;overflow:hidden;background:var(--bg-2)}
.strip img{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.strip figcaption{display:flex;justify-content:space-between;gap:.5rem;font-size:.75rem;color:var(--mute)}
.strip figcaption b{color:var(--fg-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ============ SECTIONS ============ */
.sec{padding-block:clamp(5rem,11vw,9rem);border-top:1px solid var(--line);scroll-margin-top:3rem}
.sec-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);margin-bottom:clamp(2.5rem,6vw,4.5rem);align-items:end}
.sec-no{grid-column:1/span 2;font:400 clamp(3rem,6vw,5.5rem)/.8 var(--serif);color:var(--line-2)}
.sec-head{grid-column:3/span 6;display:grid;gap:.9rem;min-width:0}
.sec-head h2{font:400 clamp(2.6rem,6vw,5.4rem)/.92 var(--serif);letter-spacing:-.02em}
.sec-head h2 .wd{display:inline-block;max-width:100%;overflow:hidden;vertical-align:top;padding:.14em 0 .12em;margin:-.14em 0 -.12em}
.sec-head h2 .ch{display:inline-block}
.sec-side{grid-column:9/span 4;color:var(--fg-2);max-width:38ch;justify-self:end}
@media (max-width:900px){.sec-no{grid-column:1/-1}.sec-head{grid-column:1/-1}.sec-side{grid-column:1/-1;justify-self:start}}

/* works: masonry in columns, text tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin-bottom:2rem;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;padding:.8rem 0;cursor:pointer;font-size:.9rem;font-weight:600;color:var(--mute);position:relative;white-space:nowrap}
.tab sup{font-size:.68em;margin-left:.2em;font-variant-numeric:tabular-nums}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.tab:hover{color:var(--fg-2)}
.tab[aria-pressed="true"]{color:var(--fg)}
.tab[aria-pressed="true"]::after{transform:scaleX(1)}
.works{columns:4;column-gap:clamp(.6rem,1.2vw,1rem)}
@media (max-width:1000px){.works{columns:3}}
@media (max-width:640px){.works{columns:2}}
.work{break-inside:avoid;margin-bottom:clamp(.6rem,1.2vw,1rem);display:grid;gap:.45rem;scroll-margin-top:5rem}
.work[hidden]{display:none}
.work button{all:unset;display:block;position:relative;overflow:hidden;background:var(--bg-2);cursor:zoom-in}
.work:nth-child(3n+1) button{aspect-ratio:3/4}
.work:nth-child(3n+2) button{aspect-ratio:9/16}
.work:nth-child(3n) button{aspect-ratio:4/5}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .6s var(--ease);filter:saturate(.88)}
.work:hover img{transform:scale(1.05);filter:saturate(1.05)}
.work button:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.work figcaption{display:flex;justify-content:space-between;gap:.6rem;font-size:.76rem;color:var(--mute)}
.work figcaption b{color:var(--fg-2);font-weight:600;min-width:0;overflow-wrap:anywhere}
.work figcaption span{flex:none}
.works-more{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;margin-top:2rem}
.empty{display:grid;gap:1rem;justify-items:start;padding:3rem 0;border-top:1px solid var(--line)}
.empty p{font:400 clamp(1.8rem,3.4vw,2.8rem)/1.1 var(--serif);color:var(--fg-2)}

.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;color:var(--fg)}
.lb::backdrop{background:color-mix(in oklch,var(--shade) 94%,transparent)}
.lb-in{height:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.5rem}
.lb figure{display:grid;justify-items:center;gap:.8rem;min-width:0}
.lb img{max-height:calc(100svh - 10rem);width:auto}
.lb figcaption{text-align:center;overflow-wrap:anywhere;max-width:100%}
.lb-btn{width:3rem;height:3rem;border:1px solid var(--line-2);background:var(--bg);cursor:pointer;font-size:1.05rem}
.lb-btn:hover{border-color:var(--fg)}
.lb-close{position:fixed;top:1.25rem;right:1.25rem}
.lb-wa{padding:.8em 1.1em;font-size:.82rem}
@media (max-width:600px){.lb-in{grid-template-columns:minmax(0,1fr);padding:1rem}.lb-prev,.lb-next{position:fixed;bottom:1.25rem}.lb-prev{left:1.25rem}.lb-next{right:1.25rem}.lb img{max-height:calc(100svh - 13rem)}}


/* banner over a wall of real work */
.banner{position:relative;min-height:clamp(440px,66vh,640px);display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate;border-top:1px solid var(--line)}
.banner.bare{background:var(--bg-2)}
.wall{position:absolute;inset:-12% 0;z-index:-2;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;will-change:transform}
.wall img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
@media (max-width:700px){.wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:color-mix(in oklch,var(--shade) 80%,transparent)}
.banner.bare::before{content:none}
.banner-in{display:grid;justify-items:center;gap:1.2rem;padding:4rem var(--g)}
.banner h2{font:400 clamp(2.6rem,6vw,5.4rem)/.95 var(--serif);letter-spacing:-.02em}
.banner-in>p:not(.lbl){max-width:42ch;color:var(--fg-2)}

/* process: steps scroll past a sticky picture */
.proc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.proc-list{grid-column:1/span 6}
.pstep{min-height:58vh;display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem;align-content:center;border-top:1px solid var(--line);padding-block:2rem;position:relative}
.pstep:last-child{border-bottom:1px solid var(--line)}
.pstep .n{font:400 3.2rem/.9 var(--serif);color:var(--line-2);transition:color .5s var(--ease)}
.pstep.on .n{color:var(--fg)}
.pstep h3{font:400 clamp(2rem,3.4vw,3rem)/1 var(--serif);margin-bottom:.8rem}
.pstep p{color:var(--fg-2);max-width:40ch}
.pstep .m-img{display:none}
.proc-fig{grid-column:8/span 5;position:sticky;top:12vh;height:76vh;align-self:start}
.proc-fig .stack{position:relative;height:calc(100% - 2rem);overflow:hidden;background:var(--bg-2)}
.proc-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proc-fig img+img{clip-path:inset(100% 0% 0% 0%)}
.proc-fig .lbl{margin-top:.8rem;display:flex;justify-content:space-between}
@media (max-width:900px){.proc-list{grid-column:1/-1}.proc-fig{display:none}.pstep{min-height:0;grid-template-columns:3.4rem minmax(0,1fr)}.pstep .m-img{display:block;grid-column:2;aspect-ratio:4/3;object-fit:cover;width:100%;margin-top:1rem}}

/* the artist: photo left, words right; stacked on phones. Then the services. */
.artist{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:center}
.artist-ph{grid-column:1/span 5;display:grid;gap:.7rem;min-width:0}
.artist-frame{aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.artist-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.artist-ph figcaption{display:flex;justify-content:space-between;gap:1rem}
.artist-copy{grid-column:7/span 6;display:grid;gap:1.2rem;align-content:center;justify-items:start;min-width:0}
.artist-no{grid-column:auto;margin-bottom:.4rem}
.artist-copy h2{font:400 clamp(3rem,6.4vw,6rem)/.9 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
.artist-lede{display:grid;gap:.8rem;font:400 clamp(1.35rem,2.1vw,1.9rem)/1.22 var(--serif);color:var(--fg-2);max-width:24ch}
.artist-list{border-top:1px solid var(--line);width:100%;margin-top:.4rem}
.artist-list li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:.6rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.artist-list i{font-style:normal;font-size:.75rem;font-weight:600;color:var(--mute);grid-row:span 2;padding-top:.3em}
.artist-list b{font-weight:600}
.artist-list span{color:var(--mute);font-size:.9rem}
@media (max-width:900px){.artist-ph,.artist-copy{grid-column:1/-1}}

.services{margin-top:clamp(3rem,7vw,5rem);display:grid;gap:1rem}
/* one card per service: its picture on top, then the number, the name and the line */
.svc-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:2.4rem 1.2rem;border-top:1px solid var(--line);padding-top:1.4rem}
.svc-list li{display:grid;gap:.5rem;align-content:start;min-width:0}
.svc-ph{position:relative;margin:0 0 .5rem;aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.svc-ph img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.92);transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .8s}
.svc-list li:hover .svc-ph img{transform:scale(1.04);filter:none}
.svc-ph.logo{background:var(--logo-ground)}
.svc-ph.logo img{object-fit:contain;padding:12%;filter:none}
.svc-list i{font-style:normal;font-size:.75rem;font-weight:600;color:var(--mute)}
.svc-list h3{font:400 clamp(1.6rem,2vw,2.1rem)/1 var(--serif);overflow-wrap:anywhere}
.svc-list p{color:var(--fg-2);font-size:.92rem}
@media (max-width:1100px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.svc-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem .9rem}.svc-list h3{font-size:1.45rem}}
@media (prefers-reduced-motion:reduce){.svc-ph img{transition:none}.svc-list li:hover .svc-ph img{transform:none}}

/* reviews: every review on show at once, a wall of Google-style cards */
/* Google's own colours (the G and the yellow stars) are the one exception to the palette: they are
   what tells a visitor at a glance that these are real Google reviews. */
.quote{--g-star:#FBBC04;display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.quote-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;min-width:0}
.g-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;padding:.8rem 1.1rem;background:var(--bg-3);border:1px solid var(--line-2);
  text-decoration:none;color:var(--fg);transition:border-color .2s}
a.g-badge:hover{border-color:var(--fg)}
.g-logo{width:1.5rem;height:1.5rem;flex:none}
.g-name{font-weight:600}
.g-score{font:600 1.35rem/1 var(--sans)}
.g-count{color:var(--fg-2);font-size:.88rem}
.quote .stars{color:var(--g-star);letter-spacing:.12em}
.g-badge .stars{font-size:1.05rem}
.rv-wall{list-style:none;padding:0;columns:3 18rem;column-gap:clamp(.8rem,1.6vw,1.2rem)}
.rv{break-inside:avoid;display:grid;gap:.9rem;margin-bottom:clamp(.8rem,1.6vw,1.2rem);padding:clamp(1.1rem,2vw,1.5rem);background:var(--bg-2);border:1px solid var(--line);transition:border-color .2s}
.rv:hover{border-color:var(--line-2)}
.rv-by{display:flex;align-items:center;gap:.8rem;min-width:0}
.rv-av{flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-2);font-weight:600;color:var(--fg)}
.rv-who{display:grid;gap:.15rem;min-width:0}
.rv-who b{font-weight:600;overflow-wrap:anywhere}
.q-src{display:inline-flex;align-items:center;gap:.4rem;color:var(--mute);font-size:.8rem}
.q-src .g-logo{width:.95rem;height:.95rem}
.rv>.stars{font-size:1.05rem;line-height:1}
.rv blockquote{color:var(--fg-2);font-size:.98rem;line-height:1.6;overflow-wrap:anywhere}

/* care and prices: a ledger in columns */
.ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.ledger>div{padding:1.6rem 1.6rem 0 0;min-width:0}
.ledger>div+div{padding-left:1.6rem;border-left:1px solid var(--line)}
.ledger h3{font:400 2.4rem/1 var(--serif);margin-bottom:1.2rem;display:flex;align-items:center;gap:.6rem;overflow-wrap:anywhere}
.ledger li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.6rem;padding:.9rem 0;border-top:1px solid var(--line);color:var(--fg-2)}
.ledger li i{font-style:normal;font-size:.75rem;font-weight:600;color:var(--mute);padding-top:.25em}
.ledger .no h3 .dot{margin:0}
.ledger.prices{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.prices li{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1rem}
.pr-name{overflow-wrap:anywhere}
.pr-name small{display:block;color:var(--mute);font-size:.82rem}
.pr-price{text-align:right;white-space:nowrap}
.pr-price b{font-weight:600;color:var(--fg)}
.note{margin-top:2rem;color:var(--mute);font-size:.88rem;max-width:70ch}
@media (max-width:760px){.ledger{grid-template-columns:minmax(0,1fr)}.ledger>div+div{padding-left:0;border-left:0}.ledger>div{padding-right:0}}

/* booking */
.book{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.book-info{grid-column:1/span 5;display:grid;gap:2rem;align-content:start;min-width:0}
.book-info dl{border-top:1px solid var(--line)}
.book-info dl div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.book-info dt{font-size:.8rem;color:var(--mute);padding-top:.15em}
.book-info dd{font-weight:600;overflow-wrap:anywhere}
.book-info dd small{display:block;font-weight:400;color:var(--mute)}
.book-info dd a{text-decoration:none}
.book-info dd a:hover{text-decoration:underline}
.map{aspect-ratio:16/10;position:relative;background:var(--bg-2);border:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.9) contrast(.92)}
.map button{all:unset;position:absolute;inset:0;display:grid;place-content:center;gap:.4rem;text-align:center;cursor:pointer;color:var(--fg-2);font-size:.88rem}
.map button b{font:400 2rem/1 var(--serif);color:var(--fg)}
.map button:focus-visible{outline:2px solid var(--fg);outline-offset:-6px}
.form{grid-column:7/span 6;display:grid;gap:1.8rem;align-content:start;min-width:0}
/* The form needs site.js; it shows only once site.js has wired it (html.form-on). Until then, and
   whenever the script did not load or run, the plain WhatsApp link stands in for it. */
.form-js{display:none;gap:1.8rem}
.form-on .form-js{display:grid}
.form-on .form-nojs{display:none}
.form h3{font:400 2.4rem/1 var(--serif)}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}
@media (max-width:560px){.f-row{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid;gap:.3rem}
.fld label,.opts legend{font:600 .72rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld textarea{font:500 1.05rem/1.4 var(--sans);color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:.7em 0;width:100%;min-width:0;border-radius:0;transition:border-color .2s}
.fld textarea{resize:vertical;min-height:6rem}
.fld input::placeholder,.fld textarea::placeholder{color:var(--mute)}
.fld input:focus-visible,.fld textarea:focus-visible{outline:none;border-bottom-color:var(--fg)}
.fld [aria-invalid="true"]{border-bottom-color:var(--dot)}
.opts{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.opts legend{padding:0;margin-bottom:.7rem;width:100%}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-block;border:1px solid var(--line-2);padding:.55em .9em;font-size:.85rem;font-weight:600;color:var(--fg-2);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.opt span:hover{border-color:var(--fg-2);color:var(--fg)}
.opt input:checked+span{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.opt input:focus-visible+span{outline:2px solid var(--fg);outline-offset:3px}
.err{border-left:2px solid var(--dot);padding-left:.8rem;font-weight:600}
.err[hidden]{display:none}
.fine{font-size:.82rem;color:var(--mute)}
@media (max-width:900px){.book-info,.form{grid-column:1/-1}}

/* faq */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.faq-list{grid-column:3/span 9;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:1rem;align-items:baseline;padding:1.5rem 0;font:400 clamp(1.5rem,2.8vw,2.3rem)/1.1 var(--serif)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font:600 .72rem/1 var(--sans);font-style:normal;color:var(--mute)}
.faq summary::after{content:"+";font:300 1.8rem/1 var(--sans);color:var(--mute);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--fg)}
.faq .ans{padding:0 0 1.6rem 4rem;color:var(--fg-2);max-width:64ch}
@media (max-width:900px){.faq-list{grid-column:1/-1}.faq .ans{padding-left:0}}

/* footer */
.foot{border-top:1px solid var(--line);padding-top:clamp(3rem,7vw,5rem);overflow:clip}
.foot-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);padding-bottom:clamp(2rem,5vw,3rem)}
.foot-cols>div{grid-column:span 3;display:grid;gap:.5rem;align-content:start;font-size:.9rem;color:var(--fg-2);min-width:0;overflow-wrap:anywhere}
.foot-cols a{text-decoration:none}
.foot-cols a:hover{color:var(--fg)}
@media (max-width:760px){.foot-cols>div{grid-column:span 6}}
.foot-big{font:400 clamp(3rem,13.4vw,13.5rem)/.85 var(--serif);letter-spacing:-.03em;text-align:center;white-space:nowrap;padding-bottom:.3em}
.foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.2rem 0 2rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--mute)}

/* mobile dock */
.dock{position:fixed;z-index:55;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:none;grid-template-columns:repeat(3,minmax(0,1fr));
  background:color-mix(in oklch,var(--bg-2) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-2);
  transform:translateY(160%);transition:transform .6s var(--ease)}
.dock.d2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dock.d1{grid-template-columns:minmax(0,1fr)}
.dock.on{transform:none}
.dock a{display:flex;align-items:center;justify-content:center;min-height:50px;text-decoration:none;font-weight:600;font-size:.88rem;color:var(--fg-2)}
.dock a+a{border-left:1px solid var(--line-2)}
.dock a.main{background:var(--fg);color:var(--bg)}
@media (max-width:760px){.dock{display:grid}.foot{padding-bottom:5rem}}

/* ============ without JavaScript: everything is there and nothing waits for a script ============ */
@media (scripting:none){
  .bar{background:var(--bg)}
  .menu-btn,.tabs,.daha{display:none}
  .works .work[hidden]{display:grid}
  .dock{transform:none}
}


/* ============ motion: where things start before anime moves them ============ */
@keyframes kurtar{to{opacity:1;transform:none;clip-path:none;visibility:visible}}
@keyframes kurtar-intro{to{opacity:0;visibility:hidden}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .intro{display:block;animation:kurtar-intro 0s 4s forwards}
  .bar,.hero-sub,.hero-act,.facts .fact,#heroLogo,.hero-copy .lbl,.hi-what,.hi-where,[data-rise],.rv{opacity:0;animation:kurtar 0s 4s forwards}
  .hero h1 .ln>span{transform:translateY(105%);animation:kurtar 0s 4s forwards}
  .sec-head h2 .ch{transform:translateY(110%);animation:kurtar 0s 4s forwards}
  .wipe{clip-path:inset(100% 0% 0% 0%);animation:kurtar 0s 4s forwards}
  .foot-big{clip-path:inset(100% 0% 0% 0%);animation:kurtar 0s 4s forwards}
  .m .intro,.m .bar,.m .hero-sub,.m .hero-act,.m .facts .fact,.m #heroLogo,.m .hero-copy .lbl,.m .hi-what,.m .hi-where,.m [data-rise],.m .rv,
  .m .hero h1 .ln>span,.m .sec-head h2 .ch,.m .wipe,.m .foot-big{animation:none}
  .m .mark-ig{clip-path:inset(0 100% 0 0)}
  .still .intro{display:none}
  .still .bar,.still .hero-sub,.still .hero-act,.still .facts .fact,.still #heroLogo,.still .hero-copy .lbl,.still [data-rise],.still .rv,
  .still .hero h1 .ln>span,.still .sec-head h2 .ch,.still .wipe,.still .foot-big{animation-delay:0s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:1ms!important}}