/* Layout: one-page lookbook site. Sticky nav, beige sections alternating with deep-green statement bands; prices sit in one card system reused across photo, motion, video, bundle and retainer blocks */
:root{
  --beige:#ebe3d5;
  --beige-2:#e0d6c4;
  --card:#f3ede2;
  --line:#cbbfa9;
  --ink:#1b211c;
  --ink-soft:#5d5a4d;
  --green:#1d3a2c;
  --green-2:#2a4b3a;
  --on-green:#efe7d8;
  --on-green-soft:#b9c2b3;
  --display:"Prata","Didot","Bodoni 72",Georgia,serif;
  --num:"Playfair Display",Georgia,serif;
  --body:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--beige);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:clamp(2.2rem,5.2vw,4rem);letter-spacing:-.01em}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.num{font-variant-numeric:tabular-nums lining-nums}

section{padding-block:clamp(56px,8vw,104px);scroll-margin-top:64px}
section.alt{background:var(--beige-2)}
section.dark{background:var(--green);color:var(--on-green)}
section.dark .label,section.dark .lead{color:var(--on-green-soft)}
.head{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-bottom:40px}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:620px}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--beige) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:60px}
.logo{font-family:var(--display);font-size:1.12rem;text-decoration:none;white-space:nowrap}
.nav nav{display:flex;gap:22px;font-size:.88rem}
.nav nav a{text-decoration:none;color:var(--ink-soft)}
.nav nav a:hover{color:var(--ink)}
@media (max-width:900px){.nav nav{display:none}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font-family:var(--body);font-size:.92rem;font-weight:500;text-decoration:none;border:1px solid var(--green);background:var(--green);color:var(--on-green);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--green-2)}
.btn.ghost{background:transparent;color:var(--green)}
.btn.ghost:hover{background:color-mix(in srgb,var(--green) 8%,transparent)}
.btn.sm{padding:8px 16px;font-size:.85rem}
.btn.light{background:var(--on-green);color:var(--green);border-color:var(--on-green)}
.btn.light:hover{background:var(--beige)}
.btn.light-ghost{background:transparent;color:var(--on-green);border-color:var(--on-green-soft)}

/* hero */
.hero{padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,104px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}
.hero-text{display:flex;flex-direction:column;gap:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:10px;font-size:.88rem;color:var(--ink-soft)}
.hero-facts b{color:var(--ink);font-weight:600}
.collage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.collage img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.collage img:nth-child(2){margin-top:44px}
.collage img:nth-child(3){margin-top:16px}

/* portfolio */
.grid-pf{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
@media (max-width:900px){.grid-pf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.grid-pf{grid-template-columns:repeat(2,minmax(0,1fr))}}
.grid-pf figure{margin:0;min-width:0}
.grid-pf img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:filter .3s}
.grid-pf figure:hover img{filter:brightness(1.06)}
.grid-pf figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);padding-top:8px}
.pf-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:28px;font-size:.9rem;color:var(--ink-soft)}

/* services */
.svc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
@media (max-width:860px){.svc{grid-template-columns:1fr}}
.svc div{padding:22px 24px 26px 0;border-bottom:1px solid var(--line);min-width:0}
.svc h3{margin-bottom:6px}
.svc p{color:var(--ink-soft);font-size:.95rem}

/* value */
.value{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
@media (max-width:860px){.value{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.value{grid-template-columns:1fr}}
.value div{min-width:0;border-top:1px solid var(--on-green-soft);padding-top:18px}
.value .big{font-family:var(--display);font-size:2.1rem;line-height:1.05;margin-bottom:12px}
.value p{font-size:.95rem;color:var(--on-green-soft)}

/* price cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
@media (max-width:560px){.cards.four{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);padding:26px 24px;display:flex;flex-direction:column;gap:16px;min-width:0}
.card.hi{background:var(--green);border-color:var(--green);color:var(--on-green)}
.card.hi .label,.card.hi .meta,.card.hi .sub,.card.hi .for{color:var(--on-green-soft)}
.card.hi li{border-color:color-mix(in srgb,var(--on-green) 20%,transparent)}
.card-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px 10px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid currentColor;padding:3px 8px}
.price{font-family:var(--num);font-weight:500;font-size:2.8rem;line-height:1;font-variant-numeric:lining-nums}
.price small{font-size:1rem;font-family:var(--body);font-weight:400}
.cards.four .price{font-size:2.3rem}
.sub{font-size:.84rem;color:var(--ink-soft);margin-top:6px}
.meta{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:4px 14px}
.card ul{list-style:none;margin:0;padding:0;font-size:.93rem}
.card li{padding:8px 0;border-top:1px solid var(--line)}
.card .for{font-size:.88rem;color:var(--ink-soft);margin-top:auto;padding-top:4px}
.card p.desc{font-size:.93rem;color:var(--ink-soft)}
.card.hi p.desc{color:var(--on-green-soft)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.cards.two{grid-template-columns:1fr}}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tier{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line);min-width:0}
.card.hi .tier{border-color:color-mix(in srgb,var(--on-green) 20%,transparent)}
.tier .sub{margin-top:0}
.exports{margin-top:48px;display:flex;flex-direction:column;gap:18px}
.note{margin-top:22px;font-size:.88rem;color:var(--ink-soft)}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px;margin-top:36px;font-size:.92rem}
@media (max-width:760px){.facts{grid-template-columns:1fr}}
.facts div{min-width:0}
.facts .label{display:block;margin-bottom:6px}
.facts ul{margin:0;padding-left:18px}

/* table */
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.93rem}
th,td{text-align:left;padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--ink)}
td.p,th.p{text-align:right;padding-right:0}
td.p{white-space:nowrap;font-weight:600;font-variant-numeric:tabular-nums}
td .s{display:block;color:var(--ink-soft);font-size:.85rem}
tr.group td{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:500;padding-top:24px;border-bottom:none}
/* Phones: each row becomes a block, name and price on top, description below. No sideways scroll. */
@media (max-width:600px){
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  tbody{display:block}
  tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
  tbody td{display:block;padding:0;border:0}
  tbody td:first-child{grid-column:1;grid-row:1;font-weight:500}
  tbody td.p{grid-column:2;grid-row:1}
  tbody td:nth-child(2):not(.p){grid-column:1/-1;margin-top:4px;color:var(--ink-soft);font-size:.88rem}
  tbody tr.group{display:block;padding:22px 0 0;border-bottom:none}
  tbody tr.group td{padding:0}
}

/* process */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.steps div{counter-increment:s;min-width:0}
.steps div::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.75rem;color:var(--green);border-top:1px solid var(--ink);padding-top:10px;margin-bottom:8px}
.steps h3{font-size:1.1rem;margin-bottom:4px}
.steps p{font-size:.9rem;color:var(--ink-soft)}
.terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px;font-size:.92rem}
@media (max-width:860px){.terms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.terms{grid-template-columns:1fr}}
.terms div{min-width:0}
.terms .label{display:block;margin-bottom:4px}

/* contact */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}}
.channels{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--on-green-soft)}
.channel{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid color-mix(in srgb,var(--on-green) 25%,transparent);flex-wrap:wrap}
.channel .h{font-family:var(--display);font-size:1.5rem;user-select:all;word-break:break-all}
.channel .actions{display:flex;gap:8px}
.copied{font-size:.8rem;color:var(--on-green-soft);min-height:1.2em}
footer{padding-block:28px;font-size:.82rem;color:var(--ink-soft)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}