*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:Arial,sans-serif}
a{
color:inherit;
text-decoration:none}
button{
font:inherit;
color:inherit;
cursor:pointer}
img{
display:block;
width:100%;
object-fit:cover}
button,a{
 -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:3px solid var(--accent);
outline-offset:5px}
.wrap{
max-width:1240px;
width:90%;
margin:auto}
.nav{
height:110px;
display:flex;
align-items:center;
justify-content:space-between}
.logo{
font-size:32px;
letter-spacing:-2px;
font-weight:800}
.logo span{
color:var(--accent)}
.logo small{
display:block;
font:8px Arial;
letter-spacing:2px;
margin-top:4px}
.nav nav{
display:flex;
gap:30px;
font-size:12px}
.nav-cta{
border:1px solid var(--line);
padding:15px 24px;
border-radius:40px;
font-size:12px}
.hero{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
min-height:650px;
gap:22px}
.hero-copy{
padding:60px 45px;
background:var(--tint);
border-radius:var(--radius);
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center}
.eyebrow{
font-size:10px;
letter-spacing:1.6px;
text-transform:uppercase;
line-height:1.7}
.hero-rule{
width:50px;
border-top:2px solid var(--accent);
margin:28px 0 6px}
h1,h2,h3,p{
margin:0}
h1{
font-size:clamp(50px,5.6vw,82px);
font-weight:400;
line-height:1.04;
letter-spacing:-4px;
margin:18px 0 24px}
em{
font-family:Georgia,serif;
font-weight:400;
color:var(--accent)}
p{
font-size:14px;
line-height:1.8}
.hero-copy>p{
max-width:320px}
.cta{
display:inline-block;
background:var(--accent);
color:var(--paper);
padding:19px 27px;
border-radius:40px;
font-size:12px;
margin-top:30px}
.hero-foot{
font-size:10px;
line-height:1.8;
margin-top:24px;
opacity:.78}
.hero-photo{
position:relative;
border-radius:var(--radius);
overflow:hidden}
.hero-photo>img{
height:100%;
position:absolute;
object-position:center 30%}
.photo-note{
position:absolute;
bottom:26px;
left:26px;
padding:20px 24px;
background:var(--paper);
font-size:17px;
line-height:1.4;
border-radius:calc(var(--radius)/2)}
.photo-note em{
font-size:22px}
.hero-side{
display:none}
.ticker{
display:flex;
justify-content:center;
gap:50px;
margin-top:42px;
padding:23px 10px;
background:var(--accent);
color:var(--paper);
font-size:12px}
.ticker i{
font-style:normal}
.section{
padding:90px 0}
.section-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:30px;
margin-bottom:36px}
h2{
font-size:clamp(36px,4.1vw,58px);
font-weight:400;
letter-spacing:-2px;
line-height:1.1;
margin-top:14px}
.section-head>p{
max-width:310px;
font-size:13px;
opacity:.85}
.occasions{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:34px 25px}
.occasion-image{
position:relative;
border-radius:var(--radius);
overflow:hidden}
.occasion-image img{
height:310px;
object-position:center 25%;
transition:transform .25s}
.occasion:hover img{
transform:scale(1.025)}
.occasion-image>span{
position:absolute;
bottom:15px;
right:15px;
background:var(--paper);
width:36px;
height:36px;
border-radius:50%;
display:grid;
place-items:center}
.occasion h3{
font-size:22px;
font-weight:400;
margin:20px 0 8px;
letter-spacing:-.5px}
.occasion p{
font-size:12px;
max-width:330px;
opacity:.85}
.service-section{
background:var(--tint)}
.services{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px}
.service{
background:var(--paper);
border-radius:var(--radius);
overflow:hidden}
.service>img{
height:320px;
object-position:center 25%}
.service>div{
padding:27px}
.service h3{
font-size:25px;
font-weight:400;
letter-spacing:-1px;
margin:10px 0 14px}
.service p{
font-size:12px;
min-height:85px}
.service-bottom{
display:flex;
align-items:center;
justify-content:space-between;
border-top:1px solid var(--line);
padding-top:20px;
margin-top:20px}

.service-bottom strong{
font-size:19px;
font-weight:400}
.service-bottom a{
border:1px solid var(--accent);
border-radius:50%;
width:40px;
height:40px;
display:grid;
place-items:center}
.brides{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px}
.photo{
border:0;
padding:0;
position:relative;
width:100%;
background:var(--tint);
border-radius:var(--radius);
overflow:hidden}
.photo img{
height:420px;
object-position:center 25%}
.zoom{
position:absolute;
right:16px;
bottom:16px;
background:var(--paper);
width:30px;
height:30px;
border-radius:50%;
display:grid;
place-items:center}
.filters{
display:flex;
gap:10px;
margin-bottom:24px}
.filters button{
border:1px solid var(--line);
padding:12px 18px;
border-radius:30px;
background:transparent;
font-size:12px}
.filters [aria-pressed=true]{
background:var(--accent);
color:var(--paper);
border-color:var(--accent)}
.hair-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:23px 18px}
.hair-grid .photo img{
height:310px}
.hair-grid p{
font-size:11px;
margin-top:10px;
opacity:.75}
.hair-grid [hidden]{
display:none}
.learn{
background:var(--accent);
color:var(--paper);
padding:50px 60px;
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
border-radius:var(--radius)}
.learn em{
color:var(--paper)}
.learn strong{
display:block;
margin-top:20px;
font-weight:400;
font-size:22px}
.learn .cta{
background:var(--paper);
color:var(--accent);
margin-top:20px}
.price-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:0 50px}
.price-row{
padding:24px 0;
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:25px;
font-size:14px}
.price-row strong{
font-weight:400;
white-space:nowrap}
.small{
font-size:11px;
opacity:.8;
margin-top:24px}
details{
margin-top:30px}
summary{
cursor:pointer;
padding:22px;
background:var(--tint);
list-style:none;
font-size:14px;
display:flex;
justify-content:space-between}
.about{
display:grid;
grid-template-columns: .8fr 1fr;
gap:90px;
align-items:center;
padding:30px 80px 100px}
.about img{
height:430px;
border-radius:var(--radius);
object-position:center 25%}
.about p{
margin-top:24px;
max-width:420px}
.contact{
background:var(--tint);
padding:80px 0}
.contact h2{
font-size:64px}
.contact p{
max-width:520px;
margin-top:24px}
.contact-links{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-top:30px}
.contact-links a{
border:1px solid var(--accent);
border-radius:30px;
padding:17px 24px;
font-size:12px}
.contact-links a:first-child{
background:var(--accent);
color:var(--paper)}
.address{
font-size:11px;
line-height:1.9;
margin-top:36px}
footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:35px 0}
footer>span:last-child{
font-size:9px;
letter-spacing:2px}
dialog{
background:var(--paper);
color:var(--ink);
border:0;
border-radius:18px;
max-width:740px;
width:90%;
padding:15px}
dialog::backdrop{
background:color-mix(in srgb,var(--accent) 65%,transparent)}
dialog>img{
max-height:72vh;
object-fit:contain}
dialog>div{
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 4px;
font-size:12px}
.close{
position:absolute;
right:20px;
top:20px;
border:0;
background:var(--paper);
width:38px;
height:38px;
border-radius:50%;
font-size:25px}
.discuss{
border-bottom:1px solid var(--accent)}

.berry h1,.berry h2,.berry .occasion h3{
font-family:Georgia,serif}
.berry .hero{
gap:0}
.berry .hero-copy{
border-radius:0}
.berry .hero-photo{
border-radius:180px 180px 0 0}
.berry .hero-copy{
background:transparent;
padding-left:0}
.berry .hero-rule{
width:90px}
.berry .service{
border:1px solid var(--line)}

.terra .hero-copy{
background:var(--accent);
color:var(--paper);
border-radius:0}
.terra .hero-copy em{
color:var(--tint)}
.terra .hero-copy .cta{
background:var(--paper);
color:var(--accent)}
.terra .hero-rule{
border-color:var(--paper)}
.terra .hero{
gap:0}
.terra .hero-photo{
border-radius:0}
.terra h1{
font-size:80px}
.terra h2 em{

font-style:normal}
.terra .ticker{
background:var(--tint);
color:var(--ink)}
.terra .occasion-image{
border-radius:0}
.terra .occasion h3{
font-family:Georgia,serif;
font-size:28px}

.violet .hero{
grid-template-columns:1.15fr 1fr}
.violet h1{
font-weight:600;
letter-spacing:-5px}
.violet .hero-copy{
border:1px solid var(--line)}
.violet .hero-photo{
border-radius:180px 180px 30px 30px}
.violet .photo-note{
transform:rotate(-4deg);
border:1px solid var(--line)}
.violet .occasion-image{
border-radius:90px 90px 18px 18px}
.violet .service:nth-child(2){
background:var(--accent);
color:var(--paper)}
.violet .service:nth-child(2) a{
border-color:var(--paper)}

.teal h1,.teal h2{
font-family:Georgia,serif}
.teal .hero{
grid-template-columns:1fr 1.05fr;
gap:55px}
.teal .hero-copy{
padding-left:0;
background:transparent}
.teal .hero-photo{
border-radius:0 180px 0 0}
.teal .hero-side{
display:block;
position:absolute;
right:-27px;
top:160px;
writing-mode:vertical-rl;
font-size:9px;
letter-spacing:4px}
.teal .ticker{
background:var(--tint);
color:var(--accent);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line)}
.teal .occasions{
gap:40px}
.teal .occasion-image img{
height:360px}
.teal .cta,.teal .nav-cta,.teal .contact-links a{
border-radius:3px}

.rose .hero{
background:var(--tint);
padding:36px;
gap:35px;
border-radius:26px}
.rose .hero-copy{
padding:20px;
background:transparent}
.rose h1{
font-family:Georgia,serif}
.rose .hero-photo{
border-radius:180px 180px 12px 12px}
.rose .hero-copy .eyebrow{
font-size:9px}
.rose .ticker{
background:transparent;
color:var(--accent);
font-size:16px;
font-family:Georgia,serif}
.rose .occasion-image{
border-radius:8px}
.rose .occasion:nth-child(2) .occasion-image,.rose .occasion:nth-child(5) .occasion-image{
border-radius:130px 130px 8px 8px}
.rose .service{
border:1px solid var(--line)}

@media(max-width:700px){
.wrap{
width:89%}
.nav{
height:90px}
.nav nav{
display:none}
.nav-cta{
padding:12px;
font-size:10px}
.logo{
font-size:26px}
.hero,.violet .hero,.teal .hero{
grid-template-columns:1fr;
gap:15px;
min-height:0}
.hero-copy,.terra .hero-copy,.rose .hero-copy,.teal .hero-copy{
padding:30px 25px}
.hero h1,.terra h1,.violet h1{
font-size:54px;
letter-spacing:-2.5px}
.hero-copy>p{
font-size:13px}
.hero-photo{
height:440px}
.hero-rule{
margin-top:18px}
.hero-foot{
font-size:10px}
.hero .eyebrow{
font-size:8px}
.hero-side{
display:none!important}
.photo-note{
padding:15px;
font-size:13px}
.photo-note em{
font-size:19px}
.ticker{
gap:16px;
font-size:10px;
flex-wrap:wrap;
margin-top:25px}
.ticker i{
display:none}
.section{
padding:55px 0}
.section-head{
display:block;
margin-bottom:26px}
.section-head>p{
margin-top:20px}
h2{
font-size:39px;
letter-spacing:-1.5px}
.occasions{
grid-template-columns:1fr 1fr;
gap:27px 15px}
.occasion-image img,.teal .occasion-image img{
height:210px}
.occasion h3,.terra .occasion h3{
font-size:20px;
line-height:1.15}
.occasion p{
font-size:11px;
line-height:1.6}
.services{
grid-template-columns:1fr}
.service{
display:grid;
grid-template-columns: .8fr 1fr}
.service>img{
height:100%;
min-height:290px}
.service>div{
padding:20px 16px}
.service h3{
font-size:23px}
.service p{
font-size:11px}
.service-bottom strong{
font-size:16px}
.service-bottom a{
width:30px;
height:30px}
.brides{
grid-template-columns:1fr 1fr;
gap:12px}
.photo img{
height:250px}
.hair-grid{
grid-template-columns:1fr 1fr;
gap:18px 12px}
.hair-grid .photo img{
height:240px}
.filters{
gap:6px}
.filters button{
font-size:10px;
padding:11px}
.learn{
padding:30px;
grid-template-columns:1fr;
gap:25px}
.learn p{
font-size:13px}
.price-grid{
grid-template-columns:1fr}
.price-row{
font-size:12px;
padding:19px 0;
gap:15px}
.about{
padding:15px 0 55px;
grid-template-columns:1fr;
gap:30px}
.about img{
height:390px;
width:85%;
margin:auto}
.about p{
font-size:13px}
.contact{
padding:55px 0}
.contact h2{
font-size:44px}
.contact-links{
flex-direction:column;
align-items:flex-start}
.contact p{
font-size:13px}
.rose .hero{
padding:12px;
gap:8px}

.teal .occasions{
gap:25px 15px}
.berry .hero-photo{
border-radius:150px 150px 0 0}
dialog>div{
gap:15px}
.zoom{
right:10px;
bottom:10px}
}

@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
.occasion-image img{
transition:none}
}

/* Три кадра: обстановка крупно, два примера в спокойной боковой колонке. */
.occasion .occasion-collage{
display:grid;
grid-template-columns:1.5fr 1fr;
grid-template-rows:1fr 1fr;
gap:5px;
height:320px;
border-radius:14px;
background:var(--paper);
isolation:isolate}

.occasion .occasion-collage img{
width:100%;
height:100%;
min-width:0;
min-height:0;
object-fit:cover;
border-radius:0;
transform:none}

.occasion .occasion-collage .scene-main{
grid-row:1/3;
object-position:center}

.occasion .occasion-collage .scene-example{
object-position:center 25%}

.occasion .occasion-collage>span{
bottom:12px;
left:12px;
right:auto;
width:30px;
height:30px;
font-size:14px}

.terra .occasion .occasion-collage{
border-radius:3px}
.teal .occasion .occasion-collage{
border-radius:8px}
.violet .occasion .occasion-collage{
border-radius:22px}
.rose .occasion .occasion-collage{
border-radius:14px}

@media(min-width:701px) and (max-width:1000px){
.occasions{
grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
.occasions{
grid-template-columns:1fr;
gap:32px}
.occasion .occasion-collage{
height:320px}
.occasion h3,.terra .occasion h3{
font-size:25px;
margin-top:17px}
.occasion p{
font-size:13px;
line-height:1.7;
max-width:none}
.teal .occasions{
gap:32px}
}


.inspiration-note{
font-size:12px;
line-height:1.7;
border-left:2px solid var(--accent);
padding:10px 16px;
margin:0 0 28px;
background:var(--tint)}
.look-filters{
flex-wrap:wrap}
.look-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px 18px}
.look-grid figure{
margin:0;
min-width:0}
.look-grid [hidden]{
display:none}
.look-grid .photo img{
height:330px}
.look-grid figcaption{
padding:13px 0 0;
display:flex;
flex-direction:column;
gap:5px}
.look-grid figcaption strong{
font-size:14px;
font-weight:400}
.look-grid figcaption span{
font-size:10px;
opacity:.75}
.look-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:28px;
font-size:12px}
.look-bottom .cta{
border:0;
margin:0;
cursor:pointer}
.look-bottom [hidden]{
display:none}
@media(max-width:700px){
.look-grid{
grid-template-columns:repeat(2,1fr);
gap:24px 12px}
.look-grid .photo img{
height:230px}
.look-grid figcaption strong{
font-size:12px}
.look-grid figcaption span{
font-size:9px}
.look-filters button{
font-size:11px}
.look-bottom{
flex-wrap:wrap}
.inspiration-note{
font-size:11px}
}

.makeup-guide{
margin:36px 0 65px}
.guide-heading{
display:flex;
justify-content:space-between;
gap:30px;
margin-bottom:24px}
.guide-heading h3,.gallery-intro h3{
font:32px Georgia,serif;
letter-spacing:-1px}
.guide-heading p{
max-width:420px;
font-size:13px}
.type-filters{
flex-wrap:wrap}
.type-panel{
background:var(--tint);
padding:32px;
border-radius:var(--radius);
display:grid;
grid-template-columns:1fr 1.2fr;
gap:35px;
align-items:center}
.type-panel[hidden]{
display:none}
.type-description h3{
font:36px Georgia,serif;
margin:12px 0}
.type-lead{
font-size:16px}
.type-description dl{
font-size:13px;
line-height:1.7;
margin:23px 0}
.type-description dt{
font-weight:bold;
margin-top:13px}
.type-description dd{
margin:5px 0}
.type-note{
font-size:12px;
opacity:.85;
border-top:1px solid var(--line);
padding-top:15px}
.inline-type{
display:inline-block;
border-bottom:1px solid var(--accent);
padding-bottom:5px;
margin-top:22px;
font-size:12px}
.type-examples{
display:grid;
grid-template-columns:1.3fr 1fr;
grid-template-rows:200px 200px;
gap:10px}
.type-examples .photo:first-child{
grid-row:1/3}
.type-examples .photo{
border-radius:8px}
.type-examples .photo img{
height:100%}
.gallery-intro{
margin-bottom:23px}
.gallery-intro p{
font-size:13px;
margin-top:9px}
.look-explainer{
margin-top:11px}
.look-explainer summary{
font-size:11px;
padding:11px 12px;
margin:0;
border-radius:6px}

.look-explainer p{
font-size:11px;
line-height:1.7;
margin-top:9px}
.look-explainer b{
font-weight:600}
@media(max-width:700px){
.guide-heading{
display:block}
.guide-heading h3,.gallery-intro h3{
font-size:27px}
.guide-heading p{
margin-top:15px}
.type-panel{
grid-template-columns:1fr;
padding:23px;
gap:25px}
.type-description h3{
font-size:30px}
.type-examples{
grid-template-rows:145px 145px}
.type-filters button{
font-size:11px}
.look-explainer summary{
font-size:10px}
.makeup-guide{
margin-bottom:45px}
}

.type-panel{
grid-template-columns:1fr}
.type-description{
max-width:850px}
.type-description dl{
display:grid;
grid-template-columns:190px 1fr;
gap:10px 25px}
.type-description dt,.type-description dd{
margin:0}
.hair-intro{
font-size:13px;
margin-bottom:24px}
.reputation-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px}
.reputation-grid>a{
padding:32px;
border:1px solid var(--line);
border-radius:var(--radius);
background:var(--tint)}
.reputation-grid h3{
font:27px Georgia,serif;
margin:15px 0}
.reputation-grid p{
font-size:13px}
@media(max-width:700px){
.type-description dl,.reputation-grid{
grid-template-columns:1fr}
.type-description dt{
margin-top:10px}
.reputation-grid>a{
padding:25px}
}

/* Shared visibility and small-screen navigation. */
[hidden] { display: none !important; }
body.photo-open { overflow: hidden; }
.photo-status { padding: 64px 24px; text-align: center; }
dialog > img { height: auto; max-height: 72vh; object-fit: contain; }
dialog > div { flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) {
  .nav { height: auto; min-height: 108px; flex-wrap: wrap; gap: 15px; padding: 16px 0; }
  .nav nav { display: flex; order: 3; width: 100%; flex-wrap: wrap; gap: 12px 22px; }
  .nav nav a { padding: 8px 0; }
  .guide-heading, .section-head, .contact-links { min-width: 0; }
}

/* Consistent vector arrow, independent of platform emoji fonts. */
.icon-arrow {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  min-width: 14px;
  min-height: 14px;
  vertical-align: -0.18em;
  flex-shrink: 0;
  pointer-events: none;
}
.zoom .icon-arrow, .service-bottom .icon-arrow {
  width: 17px;
  height: 17px;
}

/* Visual examples come first, including on narrow screens. */
.type-panel {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
}
.guide-photos {
  order: -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
}
.guide-photos figure { margin: 0; min-width: 0; }
.guide-photos .photo { display: block; }
.guide-photos .photo img {
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;
}
.guide-photo-heading {
  grid-column: 1 / -1;
  margin: 0 0 3px;
  font: 22px Georgia, serif;
}
.guide-photos figcaption { font-size: 12px; line-height: 1.5; margin-top: 12px; }
@media (max-width: 1000px) {
  .type-panel { grid-template-columns: 1fr; }
  .guide-photos { max-width: 650px; }
  .guide-photos .photo img { max-height: 360px; }
}
@media (max-width: 420px) {
  .type-panel { padding: 18px; }
  .guide-photos { gap: 10px; }
  .guide-photos figcaption { font-size: 11px; }
  .guide-photo-heading { font-size: 19px; }
}