/* DreamWeaver Welding — "The Bead"
   Black page, silver weld bead, royal blue only on the Call button.
   Type: Chakra Petch (display, slanted like the logo) + Barlow (body). Scale 1.25 from 17px. */

@font-face{font-family:"Chakra Petch";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/chakra-bolditalic.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/chakra-semibold.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/barlow-regular.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-semibold.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/barlow-mediumitalic.woff2) format("woff2")}

:root{
  --ink:#0E0F12;          /* dominant black */
  --ink-2:#17191E;
  --silver:#C9CED6;       /* weld-bead silver: lines, secondary text */
  --white:#F4F6F8;
  --blue:#2B5CFF;         /* Call button fill only */
  --blue-lt:#6F94FF;      /* links on black */
  --spark:#FFD9A0;        /* spark + focus ring only */
  /* type scale 1.25 */
  --s-1:.85rem; --s0:1.0625rem; --s1:1.328rem; --s2:1.66rem; --s3:2.075rem; --s4:2.594rem; --s5:3.24rem; --s6:4.05rem; --s7:5.07rem;
  /* spacing, 8px based */
  --sp1:8px; --sp2:16px; --sp3:24px; --sp4:32px; --sp5:48px; --sp6:64px; --sp7:96px; --sp8:128px;
  --display:"Chakra Petch","Barlow",system-ui,sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --gutter:44px;          /* room for the bead on the left */
  --bx:12px;              /* bead x inside the wrap */
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--white);font:400 var(--s0)/1.6 var(--body);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:var(--blue-lt)}
h1,h2,h3,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--spark);outline-offset:3px}
.skip{position:absolute;left:8px;top:-80px;z-index:100;background:var(--white);color:var(--ink);padding:12px 16px;font-weight:600}
.skip:focus{top:8px}

.wrap{width:100%;max-width:1256px;margin-inline:auto;padding:0 var(--sp2) 0 var(--gutter)}
.label{font:600 var(--s-1)/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--silver)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;background:var(--blue);color:#fff;text-decoration:none;font:600 var(--s0)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;transform:skewX(-8deg);position:relative;transition:transform .2s}
.btn>span{display:inline-block;transform:skewX(8deg)}
.btn::after{content:"";position:absolute;right:10px;top:8px;width:16px;height:16px;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 1 23 15 37 10 26 20 39 28 24 26 25 39 20 28 15 39 16 26 1 28 14 20 3 10 17 15Z' fill='%23FFD9A0'/%3E%3C/svg%3E") center/contain no-repeat}
.btn:hover::after,.btn:focus-visible::after{animation:flash .2s ease-out}
.btn:hover{transform:skewX(-8deg) translateY(-2px)}
@keyframes flash{0%{opacity:1;transform:scale(.4) rotate(-20deg)}60%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.5) rotate(10deg)}}
.btn-sm{min-height:44px;padding:0 20px;font-size:var(--s-1)}
.quiet{display:inline-flex;align-items:center;min-height:48px;color:var(--silver);font-weight:600;text-underline-offset:5px;text-decoration-thickness:1px}
.quiet:hover{color:var(--white)}

/* ---------- header ---------- */
.top{position:relative;z-index:20;background:var(--ink)}
.top-in{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--white);text-decoration:none;font:700 var(--s1)/1 var(--display);font-style:italic;letter-spacing:.02em;text-transform:uppercase}
.brand img{width:40px;height:40px}
.nav{display:none}

/* ---------- the bead ---------- */
.page{position:relative;background:var(--ink);isolation:isolate;overflow-x:clip;--p:1}
.bead{position:absolute;z-index:6;left:12px;top:var(--bead-top,0);bottom:0;width:18px;pointer-events:none;mix-blend-mode:difference}
.bead-tip{position:absolute;z-index:7;left:12px;top:var(--bead-top,0);bottom:0;width:18px;pointer-events:none}
.bead-run{position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='14' viewBox='0 0 18 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%236d727b'/%3E%3Cstop offset='.5' stop-color='%23e3e7ec'/%3E%3Cstop offset='1' stop-color='%236d727b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='18' height='14' fill='url(%23g)'/%3E%3Cpath d='M1 5Q9 12.500 17 5' fill='none' stroke='%232a2d33' stroke-opacity='.65' stroke-width='1.600'/%3E%3Cpath d='M1 3.600Q9 11 17 3.600' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E") 0 0/18px 14px repeat-y;
  clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0)}
.spark{position:absolute;left:-11px;top:calc(var(--p) * 100%);margin-top:-20px;display:none}
.page.live .spark{display:block}

/* ---------- hero ---------- */
.hero{padding-top:var(--sp3);padding-bottom:var(--sp6);display:grid;gap:var(--sp4)}
.hero-text .label{margin-bottom:var(--sp2)}
h1{font:700 italic clamp(3rem,17vw,5.5rem)/.9 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--white)}
h1 span{display:block}
.h1-a{font-size:.5em;color:var(--silver);letter-spacing:.02em;margin-bottom:.06em}
.hero-bead{height:14px;margin:var(--sp3) 0 var(--sp3) calc(var(--gutter) * -1 + var(--bx));width:calc(100% + var(--gutter) - var(--bx));max-width:640px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%236d727b'/%3E%3Cstop offset='.5' stop-color='%23e3e7ec'/%3E%3Cstop offset='1' stop-color='%236d727b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='14' height='14' fill='url(%23g)'/%3E%3Cpath d='M5 1Q12.500 7 5 13' fill='none' stroke='%232a2d33' stroke-opacity='.65' stroke-width='1.600'/%3E%3Cpath d='M3.600 1Q11 7 3.600 13' fill='none' stroke='%23fff' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E") 0 0/14px 14px repeat-x}
.lede{font-size:var(--s1);line-height:1.4;max-width:30ch;color:var(--white)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp2) var(--sp4);margin-top:var(--sp4)}
.actions .btn{margin-left:8px}
.cut{overflow:hidden;background:var(--ink-2)}
.cut img{width:100%;height:100%;object-fit:cover}
.hero-photo{height:min(112vw,520px);clip-path:polygon(0 0,100% 0,100% 90%,88% 100%,0 100%)}
.hero-photo img{object-position:50% 38%}

/* ---------- work tags ---------- */
.tags-sec{padding-top:var(--sp5);padding-bottom:var(--sp7)}
h2{font:700 italic var(--s4)/1.05 var(--display);text-transform:uppercase;letter-spacing:.005em}
.intro{margin-top:var(--sp2);max-width:36ch;color:var(--silver);font-size:var(--s1);line-height:1.45}
.tags{margin-top:var(--sp5);display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp2)}
.tags li{transform:rotate(var(--r));transition:transform .2s;max-width:calc(100% - 12px)}
.tags li:hover{transform:rotate(var(--r)) translateX(3px)}
.tags li:nth-child(even){margin-left:var(--sp4)}
.tags li:nth-child(3n){margin-left:16px}
.tag{display:block;position:relative;background:var(--silver);color:var(--ink);padding:14px 20px 14px 52px;font:600 var(--s1)/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;clip-path:polygon(22px 0,100% 0,100% 100%,22px 100%,0 50%)}
.tag small{display:block;font-size:var(--s-1);letter-spacing:.16em;color:#3b3f47;margin-bottom:4px}
.tag::before{content:"";position:absolute;left:20px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--ink)}

/* ---------- slice ---------- */
.slice{position:relative;padding:var(--sp8) 0 var(--sp8);color:var(--ink);margin-top:calc(var(--sp5) * -1)}
.slice::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--silver);transform:skewY(-3deg);transform-origin:50% 50%}
.slice .label{color:#2c2f36;margin-bottom:var(--sp4)}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp3);padding:var(--sp4) 0;border-top:1px solid var(--ink)}
.row-text h3{font:700 italic clamp(2.1rem,11vw,var(--s7))/.95 var(--display);text-transform:uppercase}
.row-text p{margin-top:var(--sp2);font-size:var(--s1);line-height:1.4;max-width:24ch;font-weight:600}
.slice .cut{background:#9aa0a9}
.p-main{aspect-ratio:4/3}
.row-b .p-main,.row-c .p-main{aspect-ratio:3/4;max-width:340px}
.row-a .row-pics{display:grid}
.row-a .p-main{clip-path:polygon(0 0,92% 0,100% 8%,100% 100%,0 100%)}
.row-a .p-small{width:62%;margin:-48px 0 0 auto;aspect-ratio:16/10;clip-path:polygon(0 0,100% 0,100% 100%,10% 100%,0 86%);border:0;outline:6px solid var(--silver);outline-offset:-6px}
.row-b .p-main{clip-path:polygon(0 8%,10% 0,100% 0,100% 100%,0 100%)}
.row-c .p-main{clip-path:polygon(0 0,100% 0,100% 92%,90% 100%,0 100%)}

/* ---------- reviews ---------- */
.reviews{padding-top:var(--sp7);padding-bottom:var(--sp7)}
.q{margin-top:var(--sp5);max-width:34ch;border-left:2px solid var(--silver);padding-left:var(--sp3)}
.reviews h2+.q{margin-top:var(--sp5)}
.q p{font:500 italic var(--s2)/1.3 var(--body);color:var(--silver)}
.q figcaption{margin-top:var(--sp2);font:600 var(--s-1)/1.4 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.q3 p,.q4 p{font-size:var(--s1);line-height:1.45}
.q:nth-of-type(even){margin-left:var(--sp3)}

/* ---------- contact ---------- */
.contact{padding-top:var(--sp6);padding-bottom:var(--sp8);display:grid;gap:var(--sp5);align-items:center}
.contact h2{font-size:var(--s5);margin:var(--sp1) 0 var(--sp2)}
.phone{display:inline-flex;align-items:center;min-height:56px;padding:4px 0;color:var(--white);text-decoration:none;font:700 italic clamp(1.6rem,8.6vw,var(--s7))/1.05 var(--display);letter-spacing:-.01em;border-bottom:4px solid var(--silver)}
.phone:hover{color:var(--spark);border-color:var(--spark)}
.links{margin-top:var(--sp3)}
.links a{display:inline-flex;align-items:center;min-height:48px;overflow-wrap:anywhere;font-weight:600;font-size:1rem}
@media (min-width:600px){.links a{font-size:var(--s1)}}
.tagline{margin-top:var(--sp3);font:700 italic var(--s2)/1.2 var(--display);color:var(--silver)}
.logo{width:min(70%,300px);height:auto;mix-blend-mode:lighten}

.foot{background:var(--ink-2);border-top:1px solid #2c2f36;padding:var(--sp3) 0 calc(var(--sp3) + 72px);color:var(--silver);font-size:var(--s-1)}

/* ---------- sticky bar ---------- */
.bar{position:fixed;z-index:50;left:0;right:0;bottom:0;display:flex;gap:var(--sp2);align-items:center;padding:10px var(--sp2) calc(10px + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid #2c2f36}
.bar .btn{flex:1 1 60%;margin-left:6px}
.bar-fb{flex:1 1 40%;display:flex;align-items:center;justify-content:center;min-height:56px;color:var(--white);border:1px solid var(--silver);text-decoration:none;font:600 var(--s0)/1 var(--display);letter-spacing:.06em;text-transform:uppercase}

/* ---------- tablet / desktop ---------- */
@media (min-width:600px){
  :root{--gutter:56px}
  .wrap{padding-right:var(--sp4)}
  .tags{flex-direction:row;flex-wrap:wrap;gap:var(--sp2) var(--sp3)}
  .tags li:nth-child(even){margin-left:0;margin-top:var(--sp3)}
  .tags li:nth-child(3n){margin-left:0;margin-top:0}
  .tags li:nth-child(5){margin-left:var(--sp5)}
  .q{max-width:44ch}
  .q p{font-size:var(--s3);line-height:1.25}
  .q3 p,.q4 p{font-size:var(--s1)}
}
@media (min-width:900px){
  :root{--gutter:64px;--bx:16px}
  body{font-size:var(--s0)}
  .wrap{padding-right:var(--sp5)}
  .bead,.bead-tip{left:max(16px,calc(50% - 628px + 16px))}
  .top-in{min-height:88px}
  .nav{display:flex;align-items:center;gap:var(--sp4)}
  .nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;color:var(--silver);text-decoration:none;font:600 var(--s-1)/1 var(--display);letter-spacing:.14em;text-transform:uppercase}
  .nav a:not(.btn):hover{color:var(--white);text-decoration:underline;text-underline-offset:6px}
  .bar{display:none}
  .foot{padding-bottom:var(--sp3)}
  .hero{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--sp5);align-items:start;padding-top:var(--sp5);padding-bottom:var(--sp7)}
  h1{font-size:clamp(5rem,10.4vw,9.5rem)}
  .hero-photo{height:680px;clip-path:polygon(0 0,100% 0,100% 100%,12% 100%,0 90%)}
  .lede{font-size:var(--s2);max-width:26ch}
  h2{font-size:var(--s6)}
  .tags-sec{padding-top:var(--sp7);padding-bottom:var(--sp8);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 var(--sp6);align-items:start;grid-template-rows:auto 1fr}
  .tags-sec h2{grid-column:1;grid-row:1}
  .tags-sec .intro{grid-column:1;grid-row:2}
  .tags{grid-column:2;grid-row:1 / span 2;margin-top:var(--sp2);flex-direction:column;flex-wrap:nowrap;gap:var(--sp3)}
  .tags li,.tags li:nth-child(n){margin:0}
  .tags li:nth-child(1){margin-left:0}.tags li:nth-child(2){margin-left:72px}.tags li:nth-child(3){margin-left:24px}.tags li:nth-child(4){margin-left:112px}.tags li:nth-child(5){margin-left:40px}.tags li:nth-child(6){margin-left:96px}.tags li:nth-child(7){margin-left:8px}
  .slice{margin-top:0}
  .row{grid-template-columns:repeat(12,1fr);gap:0 var(--sp3);align-items:center;padding:var(--sp6) 0}
  .row-a .row-pics{grid-column:1 / span 7}
  .row-a .row-text{grid-column:9 / span 4}
  .row-b .row-text{grid-column:2 / span 5}
  .row-b .row-pics{grid-column:8 / span 4;justify-self:end}
  .row-c .row-pics{grid-column:2 / span 4}
  .row-c .row-text{grid-column:7 / span 5}
  .row-c .row-pics{margin-bottom:-120px}
  .row-b .p-main,.row-c .p-main{max-width:none;width:100%}
  .row-text p{font-size:var(--s2)}
  .reviews{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 var(--sp6);align-items:start}
  .reviews h2{grid-column:1 / -1}
  .q,.q:nth-of-type(even){max-width:none;margin:var(--sp6) 0 0}
  .q p{font-size:var(--s4);line-height:1.18}
  .q3 p,.q4 p{font-size:var(--s2);line-height:1.35}
  .q1{grid-column:1;grid-row:2}
  .q2{grid-column:2;grid-row:2;margin-top:calc(var(--sp8) + var(--sp2))}
  .q3{grid-column:1;grid-row:3}
  .q4{grid-column:2;grid-row:3;margin-top:var(--sp7)}
  .q5{grid-column:1 / -1;grid-row:4;padding-left:var(--sp4)}
  .q5 p{font-size:var(--s6);line-height:1.08;max-width:20ch}
  .contact{grid-template-columns:1.4fr .6fr;gap:var(--sp6);padding-top:var(--sp7)}
  .contact h2{font-size:var(--s6)}
  .logo{justify-self:end;width:100%;max-width:320px}
}
@media (min-width:1200px){
  .hero-photo{height:760px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bead .spark{display:none!important}
}

/* header: keep the phone number on one line between 900 and 1100px */
.nav .btn{white-space:nowrap}
@media (min-width:900px) and (max-width:1100px){.nav{gap:var(--sp2)}.nav a:not(.btn){letter-spacing:.06em}.nav .btn{padding-inline:var(--sp2)}}
@media (max-width:899px){html{scroll-padding-bottom:96px}}