:root{
  --midnight:#0a0c10;
  --panel:#12151d;
  --panel-2:#171b25;
  --ink:#ece5d3;
  --ink-dim:#b9b2a0;
  --gold:#c9a35f;
  --gold-bright:#e3c98c;
  --bone:#efe7d7;
  --bone-2:#e7dcc4;
  --bone-ink:#191a17;
  --bone-dim:#4c463a;
  --line:rgba(201,163,95,.28);
  --line-soft:rgba(236,229,211,.12);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --head-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--midnight);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--gold-bright)}
:focus-visible{outline:3px solid var(--gold-bright);outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:10px;top:10px;width:1px;height:1px;overflow:hidden;white-space:nowrap;background:var(--gold);color:#14100a;font-weight:800;z-index:300;text-decoration:none;border-radius:8px}
.skip:focus{width:auto;height:auto;padding:12px 20px;overflow:visible;white-space:normal}
.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.04;margin:0;color:var(--ink)}
p{margin:0 0 1em}
.eyebrow{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--gold-bright);letter-spacing:.01em}
.micro{font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:.8em 1.9em;border-radius:999px;background:var(--gold);color:#161207;font-weight:800;font-size:.98rem;text-decoration:none;border:2px solid var(--gold);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn.ghost{background:transparent;color:var(--gold-bright)}
.btn.ghost:hover{background:rgba(201,163,95,.12)}
.btn.dark{background:var(--bone-ink);border-color:var(--bone-ink);color:var(--bone)}
.btn.dark:hover{background:#000}
/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:100;background:var(--midnight);border-bottom:1px solid var(--line-soft)}
.head-in{max-width:1360px;margin:0 auto;padding:0 clamp(16px,3vw,40px);height:var(--head-h);display:flex;align-items:center;gap:28px}
.brand{text-decoration:none;display:flex;flex-direction:column;line-height:1.05;flex:none}
.brand .b-name{font-family:var(--serif);font-size:1.42rem;font-weight:700;color:var(--ink);letter-spacing:.01em}
.brand .b-sub{font-size:.62rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.main a{color:var(--ink);text-decoration:none;font-size:.86rem;font-weight:600;padding:10px 11px;border-radius:6px;white-space:nowrap}
nav.main a:hover{color:var(--gold-bright)}
nav.main a[aria-current="page"]{color:var(--gold-bright);box-shadow:inset 0 -2px 0 var(--gold)}
.head-cta{flex:none;margin-left:10px;min-height:46px;padding:.55em 1.4em;font-size:.9rem}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);min-width:48px;min-height:48px;font-size:1.25rem;cursor:pointer}
.mobile-menu{display:none;background:var(--panel);border-bottom:1px solid var(--line)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:15px 24px;color:var(--ink);text-decoration:none;font-weight:600;border-top:1px solid var(--line-soft)}
.mobile-menu a[aria-current="page"]{color:var(--gold-bright)}
/* ---------- views ---------- */


/* ---------- arc motif ---------- */
.arc{display:block;width:100%;height:64px;margin-bottom:-1px}
.arc svg{display:block;width:100%;height:100%}
.arc.flip{transform:scaleY(-1)}
/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:45% 55%;min-height:calc(100vh - var(--head-h));min-height:calc(100svh - var(--head-h))}
.hero-text{background:var(--midnight);display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,6vw,84px) clamp(24px,4.5vw,72px);position:relative}
.hero-text .status{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright);margin:14px 0 26px}
.hero-text .status::before{content:"";width:9px;height:9px;border-radius:50%;background:#7fc76a;flex:none}
.hero h1{font-size:clamp(3rem,5.6vw,4.9rem);font-weight:600}
.hero h1 .small{display:block;font-size:.42em;font-weight:500;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:.3em}
.hero h1 .role{display:block;font-size:.32em;font-style:italic;font-weight:500;line-height:1.25;letter-spacing:.02em;color:var(--gold-bright);margin-bottom:.7em}
.hero h1 em{font-style:italic;color:var(--gold-bright)}
.hero .styles-line{margin:26px 0 8px;font-size:1.06rem;color:var(--ink);max-width:34ch}
.hero .where{color:var(--ink-dim);margin-bottom:34px}
.hero-img{position:relative;min-height:420px}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img figcaption{position:absolute;left:18px;bottom:14px;background:rgba(10,12,16,.82);color:var(--ink);font-family:var(--serif);font-style:italic;font-size:.98rem;padding:6px 14px;border-radius:999px}
/* ---------- sections ---------- */
section.band{padding:clamp(64px,9vw,118px) 0}
.band.bone{background:var(--bone);color:var(--bone-ink)}
.band.bone h2,.band.bone h3{color:var(--bone-ink)}
.band.bone .eyebrow{color:#8a6a25}
.band.bone .micro{color:#8a6a25}
.band.panel{background:var(--panel)}
.band-head{max-width:720px;margin-bottom:clamp(34px,5vw,58px)}
.band-head h2{font-size:clamp(2.1rem,4vw,3.3rem);margin:10px 0 14px}
.band-head h2 em{font-style:italic;color:var(--gold-bright)}
.band.bone .band-head h2 em{color:#8a6a25}
.band-head p{color:var(--ink-dim);font-size:1.05rem}
.band.bone .band-head p{color:var(--bone-dim)}
/* style index rows */
.style-rows{border-top:1px solid rgba(25,26,23,.18)}
.style-row{display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;padding:26px 6px;border-bottom:1px solid rgba(25,26,23,.18);text-decoration:none;color:var(--bone-ink)}
.style-row .num{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:#8a6a25}
.style-row .sr-name{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;line-height:1.1}
.style-row .sr-desc{display:block;font-family:var(--sans);font-size:.95rem;color:var(--bone-dim);margin-top:4px;max-width:56ch}
.style-row .sr-arrow{font-family:var(--serif);font-size:1.9rem;color:#8a6a25;transition:transform .2s}
.style-row:hover .sr-arrow{transform:translateX(6px)}
/* showcase */
.show-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.work{position:relative;margin:0;overflow:hidden;border-radius:10px;background:var(--panel-2)}
.work.arch{border-radius:190px 190px 10px 10px}
.work button{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}
.work button:focus-visible{outline:3px solid var(--gold-bright);outline-offset:-3px}
.work img{width:100%;height:100%;object-fit:cover}
.work figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;background:linear-gradient(transparent,rgba(8,9,12,.85));font-family:var(--serif);font-style:italic;font-size:.95rem;color:#f2ead6;pointer-events:none}
.w-a{grid-column:span 5;aspect-ratio:4/5.1}
.w-b{grid-column:span 4;aspect-ratio:4/4.4}
.w-c{grid-column:span 3;aspect-ratio:3/4.4}
.w-d{grid-column:span 4;aspect-ratio:4/4.6}
.w-e{grid-column:span 4;aspect-ratio:4/4.6}
.w-f{grid-column:span 4;aspect-ratio:4/4.6}
.w-g{grid-column:span 3;aspect-ratio:3/4.2}
.w-h{grid-column:span 5;aspect-ratio:5/4.2}
.w-i{grid-column:span 4;aspect-ratio:4/4.2}
/* about strip */
.about-grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.portrait-frame{position:relative}
.portrait-frame img{border-radius:200px 200px 12px 12px;filter:grayscale(1) contrast(1.06);width:100%;height:auto;aspect-ratio:3/3.9;object-fit:cover;object-position:top}
.portrait-frame::after{content:"";position:absolute;inset:0;border-radius:200px 200px 12px 12px;background-image:radial-gradient(rgba(255,255,255,.14) .6px,transparent .7px);background-size:3px 3px;mix-blend-mode:overlay;pointer-events:none}
.about-copy h2{font-size:clamp(2rem,3.6vw,3rem);margin:10px 0 16px}
.about-copy h2 em{font-style:italic;color:#8a6a25}
.about-copy p{color:var(--bone-dim);max-width:58ch}
.facts{display:flex;flex-wrap:wrap;gap:10px 34px;margin:22px 0 28px;padding:0;list-style:none}
.facts li{font-size:.92rem;font-weight:700;color:var(--bone-ink)}
.facts li span{display:block;font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.02rem;color:#8a6a25}
/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3.5vw,44px)}
.step{border-top:2px solid var(--gold);padding-top:20px}
.step .s-num{font-family:var(--serif);font-style:italic;font-size:2.6rem;color:var(--gold-bright);line-height:1}
.step h3{font-size:1.55rem;margin:12px 0 8px}
.step p{color:var(--ink-dim);font-size:.98rem}
.step:nth-child(2){margin-top:34px}
.step:nth-child(3){margin-top:68px}
/* faq teaser + lists */
.teaser-q{border-bottom:1px solid rgba(25,26,23,.16);padding:20px 2px}
.teaser-q h3{font-size:1.4rem;margin-bottom:5px}
.teaser-q p{color:var(--bone-dim);margin:0;max-width:64ch}
/* visit / map */
.visit-grid{display:flex;flex-direction:column;gap:clamp(30px,4.5vw,52px)}
.visit-info{max-width:760px}
.visit-info h2{font-size:clamp(2rem,3.6vw,3rem);margin:10px 0 16px}
.visit-info address{font-style:normal;font-size:1.08rem;line-height:1.7;margin-bottom:14px}
.visit-info .lbl{font-family:var(--serif);font-style:italic;color:var(--gold-bright);font-size:1.05rem}
.studio-location-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin-bottom:18px}
.studio-location-head h3{font-size:clamp(1.65rem,2.8vw,2.2rem);margin:8px 0 6px}
.studio-location-head p{color:var(--ink-dim);margin:0;max-width:58ch}
.map-frame{border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);background:var(--panel);height:440px;min-height:340px;position:relative}
.map-frame.short{height:320px;min-height:300px}
.studio-map{width:100%;height:100%;min-height:inherit}
.map-fallback{padding:clamp(22px,3.5vw,36px);color:var(--ink-dim)}
.map-fallback strong{color:var(--ink);font-family:var(--serif);font-size:1.35rem}
.pin{background:var(--gold);color:#161207;border:2px solid #161207;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.pin--on{background:var(--gold-bright)}
/* final cta */
.cta-band{background:var(--panel);text-align:center;padding:clamp(70px,9vw,110px) 0}
.cta-band h2{font-size:clamp(2.3rem,4.6vw,3.8rem);max-width:20ch;margin:12px auto 16px}
.cta-band h2 em{font-style:italic;color:var(--gold-bright)}
.cta-band p{color:var(--ink-dim);max-width:52ch;margin:0 auto 30px}
/* ---------- page headers (inner pages) ---------- */
.page-head{padding:clamp(54px,7vw,88px) 0 clamp(40px,5vw,60px)}
.page-head h1{font-size:clamp(2.4rem,5vw,4.2rem);max-width:16ch;margin:12px 0 16px}
.page-head h1 em{font-style:italic;color:var(--gold-bright)}
.page-head .lede{font-size:1.12rem;color:var(--ink-dim);max-width:62ch}
.page-head.bone{background:var(--bone);color:var(--bone-ink)}
.page-head.bone h1{color:var(--bone-ink)}
.page-head.bone h1 em{color:#8a6a25}
.page-head.bone .eyebrow{color:#8a6a25}
.page-head.bone .lede{color:var(--bone-dim)}
.big-word{display:block;font-size:clamp(3.4rem,9vw,7.5rem);line-height:.95}
/* prose */
.prose{max-width:70ch}
.prose p{color:var(--ink-dim)}
.band.bone .prose p{color:var(--bone-dim)}
.prose h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:1.2em 0 .5em}
.prose h3{font-size:1.45rem;margin:1.3em 0 .4em}
.prose ul{color:var(--ink-dim);padding-left:1.2em}
.band.bone .prose ul{color:var(--bone-dim)}
.prose li{margin-bottom:.45em}
.two-col{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
.side-img img{border-radius:12px;width:100%;height:auto;aspect-ratio:3/3.6;object-fit:cover}
.side-img.arch img{border-radius:190px 190px 12px 12px}
.side-img figcaption{font-family:var(--serif);font-style:italic;color:var(--gold-bright);margin-top:10px;font-size:1rem}
.band.bone .side-img figcaption{color:#8a6a25}
/* gallery wall */
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.wall .work{border-radius:4px;aspect-ratio:3/3.8}
.wall .work:nth-child(3n){aspect-ratio:3/3.1}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:clamp(40px,5vw,64px)}
.tile{position:relative;border-radius:12px;overflow:hidden;text-decoration:none;display:block;aspect-ratio:16/10.5}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.04)}
.tile .tile-label{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 16px;background:linear-gradient(transparent,rgba(8,9,12,.88));color:#f2ead6}
.tile .tile-label .t-name{font-family:var(--serif);font-size:1.7rem;font-weight:600;display:block;line-height:1.1}
.tile .tile-label .t-sub{font-family:var(--serif);font-style:italic;color:var(--gold-bright)}
/* faq */
details.faq{border-bottom:1px solid var(--line-soft);padding:6px 0}
.band.bone details.faq{border-color:rgba(25,26,23,.16)}
details.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.42rem;font-weight:600;padding:16px 34px 16px 2px;position:relative;list-style:none;color:var(--ink)}
.band.bone details.faq summary{color:var(--bone-ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:1.6rem;color:var(--gold);font-family:var(--sans);font-weight:400}
details.faq[open ] summary::after{content:"–"}
details.faq .faq-body{padding:0 2px 20px;color:var(--ink-dim);max-width:68ch}
.band.bone details.faq .faq-body{color:var(--bone-dim)}
/* note panel */
.note-panel{border:1px solid var(--line);border-radius:14px;padding:clamp(26px,4vw,44px);background:var(--panel-2)}
.note-panel .np-title{font-family:var(--serif);font-style:italic;font-size:1.5rem;color:var(--gold-bright);margin-bottom:10px}
.note-panel p{color:var(--ink-dim);margin:0;max-width:64ch}
/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-weight:700;font-size:.94rem;color:var(--ink)}
.field label .opt{font-weight:500;color:var(--ink-dim);font-size:.85rem}
.field label .req{color:var(--gold-bright)}
.field input[type=text],.field input[type=tel],.field input[type=email],.field select,.field textarea{background:var(--midnight);border:1px solid rgba(236,229,211,.3);border-radius:9px;color:var(--ink);font:inherit;font-size:1rem;padding:13px 14px;min-height:52px;width:100%}
.field textarea{min-height:120px;resize:vertical}
.field input[type=file]{color:var(--ink-dim);font-size:.95rem;padding:10px 0}
.field .hint{font-size:.86rem;color:var(--ink-dim)}
.field .err{font-size:.88rem;color:#f0a48e;font-weight:600;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#e07856}
.check{display:flex;gap:12px;align-items:flex-start;background:var(--midnight);border:1px solid rgba(236,229,211,.3);border-radius:9px;padding:14px 16px}
.check input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--gold)}
.check label{font-size:.95rem;color:var(--ink)}
.form-errors{display:none;border:1px solid #e07856;background:rgba(224,120,86,.1);border-radius:10px;padding:16px 20px;margin-bottom:24px;color:#f4c4b2}
.form-errors.show{display:block}
.form-errors ul{margin:6px 0 0;padding-left:1.2em}
.success-panel{display:none;border:1px solid var(--gold);border-radius:14px;padding:clamp(26px,4vw,44px);background:var(--panel-2)}
.success-panel.show{display:block}
.success-panel h2{font-size:2rem;margin-bottom:12px}
.success-panel p{color:var(--ink-dim);max-width:62ch}
.success-panel dl{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:20px 0}
.success-panel dt{font-weight:800;color:var(--gold-bright);font-size:.9rem}
.success-panel dd{margin:0;color:var(--ink)}
/* ---------- footer ---------- */
footer.site{background:#07080b;border-top:1px solid var(--line-soft);padding:52px 0 110px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
footer.site h3{font-size:1.25rem;margin-bottom:14px}
footer.site a{color:var(--ink-dim);text-decoration:none}
footer.site a:hover{color:var(--gold-bright)}
footer.site a.btn{color:#161207}
footer.site a.btn:hover{color:#161207;background:var(--gold-bright)}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:9px}
footer.site address{font-style:normal;color:var(--ink-dim);line-height:1.7}
.foot-brand .f-name{font-family:var(--serif);font-size:1.9rem;color:var(--ink);line-height:1.1}
.foot-brand .f-sub{font-family:var(--serif);font-style:italic;color:var(--gold-bright);font-size:1.05rem;margin:4px 0 16px}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;gap:10px 30px;font-size:.86rem;color:var(--ink-dim)}
/* ---------- mobile bar ---------- */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--midnight);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.mobile-bar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 12px;color:var(--ink);text-decoration:none;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;min-height:56px;justify-content:center}
.mobile-bar a .mb-ic{font-size:1.15rem;color:var(--gold-bright)}
.mobile-bar a.book{background:var(--gold);color:#161207}
.mobile-bar a.book .mb-ic{color:#161207}
/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(5,6,8,.94);display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,760px);max-height:76vh;object-fit:contain;border-radius:8px}
.lightbox .lb-cap{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.1rem;margin-top:16px;text-align:center;max-width:60ch}
.lb-btn{position:absolute;background:rgba(18,21,29,.9);border:1px solid var(--line);color:var(--ink);border-radius:50%;width:52px;height:52px;font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close{top:18px;right:18px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}
/* ---------- responsive ---------- */
@media (max-width:1180px){ nav.main a{padding:10px 7px;font-size:.82rem} }
@media (max-width:1020px){
  nav.main{display:none}
  .head-cta{display:none}
  .menu-btn{display:flex;align-items:center;justify-content:center}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-img{min-height:52vh;order:-1}
  .hero-text{padding-top:44px;padding-bottom:56px}
  .steps{grid-template-columns:1fr}
  .step:nth-child(2),.step:nth-child(3){margin-top:0}
  .two-col,.about-grid{grid-template-columns:1fr}
  .map-frame{height:380px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .wall{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .show-grid{grid-template-columns:1fr 1fr}
  .w-a,.w-b,.w-c,.w-d,.w-e,.w-f,.w-g,.w-h,.w-i{grid-column:span 1;aspect-ratio:3/3.9}
  .w-a,.w-h{grid-column:span 2;aspect-ratio:4/3.4}
  .tile-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .mobile-bar{display:flex}
  .map-frame{height:340px}
  footer.site{padding-bottom:130px}
  .style-row{grid-template-columns:40px 1fr auto;gap:12px}
  .success-panel dl{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tile img,.style-row .sr-arrow{transition:none}
}
/* ==========================================================================
   ALTERNATE VERSION: tattoo frames
   Every tattoo photo sits on a patch of skin, ringed by a border drawn
   from its own style's traditional filler work, with a bold black
   outline, the way the piece itself is inked: American traditional gets
   barbed wire, Japanese traditional gets seigaiha, the traditional
   blue ocean wave pattern, concentric arcs of layered blue and foam
   white on a deep indigo band, full color gets the same continuous
   barbed wire as American traditional, and cover-ups get a
   blast-over band, a faded ghost of the old tattoo mostly buried under
   bold new black. Mixed pages keep the barbed wire. Every piece sits
   level on the shared grid, aligned on both axes.
   ========================================================================== */
.tf-skin{
  position:relative;
  border-radius:14px;
  padding:21px;
  background-color:#c98f63;
  background-image:
    radial-gradient(rgba(96,48,20,.16) .7px, transparent .9px),
    radial-gradient(130% 100% at 28% 12%, rgba(255,236,205,.5), rgba(255,236,205,0) 55%),
    radial-gradient(120% 120% at 78% 92%, rgba(110,52,22,.34), rgba(110,52,22,0) 58%),
    linear-gradient(150deg,#e0aa7c 0%,#d29a67 48%,#c08352 100%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-position:0 0,0 0,0 0,0 0;
  background-size:5px 5px,cover,cover,cover;
  box-shadow:0 18px 34px rgba(0,0,0,.42),0 3px 8px rgba(0,0,0,.32),inset 0 0 22px rgba(101,50,18,.28);
}
.tf-ink{background:#0b0906;padding:5px;border-radius:5px;box-shadow:0 0 0 1px rgba(20,12,6,.4),inset 0 0 0 1px #000}
.tf-ink img{border-radius:2px}
/* one continuous run of barbed wire, drawn per frame by the script below:
   two twisted strands and their barbs follow a single rounded path around
   all four sides, so the wire turns each corner instead of four separate
   strips overlapping there */
.tf-wire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hero-img.tf-hero figcaption{z-index:2}
/* gallery pieces: the frame replaces the old card chrome */
.work.tf{overflow:visible;background:transparent;border-radius:14px;transition:transform .35s ease}
.work.tf.arch{border-radius:14px}
.work .tf-skin{display:flex;flex-direction:column;height:100%}
.work .tf-ink{flex:1 1 auto;min-height:0;display:flex;position:relative}
.work .tf-ink>button{flex:1 1 auto;height:auto}
.work .tf-ink figcaption{left:5px;right:5px;bottom:5px;border-radius:0 0 3px 3px}
/* style-page side photos get the same frame */
.side-img .tf-ink{position:relative}
.side-img.tf img{border-radius:2px}
.side-img.tf figcaption{color:#33200f;margin-top:12px;font-weight:600}
.band.bone .side-img.tf figcaption{color:#33200f}
.side-img.tf{margin-top:26px}
/* level placement: every framed piece sits square on the shared grid,
   aligned with its neighbours on both axes, no offsets and no tilt.
   The gallery hub tiles carry their style's border as an inset overlay. */
.tile .tf-wire{z-index:2}
.tile .tile-label{z-index:3}
@media (prefers-reduced-motion:reduce){
  .work.tf{transition:none}
}
/* the hero piece is a tattoo too: same skin and wire, inset into its panel */
.hero-img.tf-hero{
  background-color:#c98f63;
  background-image:
    radial-gradient(rgba(96,48,20,.16) .7px, transparent .9px),
    radial-gradient(130% 100% at 28% 12%, rgba(255,236,205,.5), rgba(255,236,205,0) 55%),
    radial-gradient(120% 120% at 78% 92%, rgba(110,52,22,.34), rgba(110,52,22,0) 58%),
    linear-gradient(150deg,#e0aa7c 0%,#d29a67 48%,#c08352 100%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
  background-position:0 0,0 0,0 0,0 0;
  background-size:5px 5px,cover,cover,cover;
}
.hero-img.tf-hero img{left:34px;top:34px;right:auto;bottom:auto;width:calc(100% - 68px);height:calc(100% - 68px);border-radius:3px;box-shadow:0 0 0 5px #0b0906,0 0 0 7px rgba(20,12,6,.45),0 24px 44px rgba(0,0,0,.35)}
.hero-img.tf-hero figcaption{left:52px;bottom:44px}

/* ---- package additions (Standard upgrade) ---- */
.map-frame iframe{width:100%;height:100%;border:0;display:block}
.trust-line{margin-top:16px;font-size:.92rem;font-weight:600;color:var(--gold-bright);max-width:56ch}
.cta-band .trust-line{margin-left:auto;margin-right:auto}
.head-cta-line{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:24px}
.head-tel{font-weight:800;color:var(--gold-bright);text-decoration:none}
.head-tel:hover{text-decoration:underline}
fieldset.form-step{border:1px solid var(--line-soft);border-radius:12px;padding:clamp(18px,3vw,28px);margin:0 0 26px}
fieldset.form-step legend{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--ink);padding:0 10px}
.mobile-bar{transition:transform .25s ease}
.mobile-bar.bar-hidden{transform:translateY(110%)}
.success-panel.show{display:block}
figure.work{min-width:0}
.wall .tf-skin,.show-grid .tf-skin{min-width:0}