:root { --ink:#243128; --green:#375745; --cream:#f7f1e7; --paper:#fffdf9; --terracotta:#d86d50; --mustard:#e5b450; --line:rgba(36,49,40,.16); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.topbar { max-width:1200px; padding:22px 32px; min-height:84px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:7px; font-family:"Playfair Display",serif; font-size:25px; font-weight:700; letter-spacing:-1.3px; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--paper); background:var(--terracotta); font:600 17px/1 "DM Sans",sans-serif; letter-spacing:-1px; }
.nav { display:flex; gap:29px; font-size:14px; font-weight:600; }
.nav a { transition:color .2s; }.nav a:hover { color:var(--terracotta); }
.menu-button { display:none; border:0; background:transparent; font-size:24px; color:var(--ink); }
.hero { min-height:615px; padding:70px max(32px, calc((100vw - 1136px)/2)); display:grid; grid-template-columns:1.04fr .96fr; align-items:center; overflow:hidden; background:var(--cream); }
.eyebrow { margin:0 0 13px; color:var(--terracotta); font-size:11px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Playfair Display",serif; line-height:1.07; letter-spacing:-1.6px; }
h1 { max-width:620px; margin-bottom:23px; font-size:clamp(52px,6vw,82px); } h1 em,h2 em { color:var(--terracotta); font-weight:600; }
.intro { max-width:465px; color:#536259; font-size:18px; }
.hero-actions { display:flex; gap:25px; align-items:center; margin-top:36px; }.button { display:inline-flex; gap:25px; align-items:center; border:0; padding:14px 18px 14px 21px; font:700 13px "DM Sans",sans-serif; cursor:pointer; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { color:#fff; background:var(--green); }.button span { font-size:20px; line-height:13px; }.text-link { display:inline-flex; gap:10px; align-items:center; border-bottom:1px solid var(--ink); padding-bottom:2px; font-size:14px; font-weight:700; }
.hero-art { position:relative; width:min(430px,100%); aspect-ratio:1; margin-left:auto; border-radius:47% 53% 48% 52% / 40% 44% 56% 60%; background:#dae5d8; overflow:hidden; transform:rotate(-5deg); }.hero-art p { position:absolute; z-index:2; top:59%; left:22%; color:var(--green); font:600 italic 27px/1.12 "Playfair Display",serif; transform:rotate(5deg); }.sun { position:absolute; width:175px; height:175px; top:32px; right:38px; border-radius:50%; background:#f1c866; }.bobbin { position:absolute; z-index:2; width:112px; height:135px; right:57px; bottom:55px; border:12px solid var(--terracotta); border-radius:21px; transform:rotate(27deg); background:#f7dfd2; }.bobbin:before,.bobbin:after { content:""; position:absolute; left:-22px; width:132px; height:21px; border-radius:11px; background:var(--terracotta); }.bobbin:before { top:-26px; }.bobbin:after { bottom:-26px; }.bobbin i { position:absolute; top:15px; bottom:15px; width:3px; background:var(--terracotta); }.bobbin i:nth-child(1){left:23px}.bobbin i:nth-child(2){left:44px}.bobbin i:nth-child(3){left:65px}.needle { position:absolute; z-index:3; width:5px; height:195px; right:185px; bottom:86px; background:#536259; transform:rotate(40deg); }.needle:after { content:""; position:absolute; bottom:-8px; left:-4px; width:13px; height:13px; border:3px solid #536259; border-radius:50%; }.thread { position:absolute; border:3px solid transparent; border-top-color:var(--green); border-radius:50%; }.thread-one { width:230px; height:140px; top:132px; left:18px; transform:rotate(45deg); }.thread-two { width:178px; height:100px; top:194px; left:47px; border-top-color:var(--terracotta); transform:rotate(57deg); }.stitch { position:absolute; color:var(--green); font-size:27px; font-weight:700; }.stitch-a{top:70px;left:53px}.stitch-b{top:104px;left:31px}.stitch-c{top:38px;left:98px}
.section { max-width:1136px; margin:auto; padding:116px 0; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:43px; }.section-heading h2,.about h2,.contact h2 { margin-bottom:0; font-size:clamp(39px,4.2vw,58px); }.service-grid { display:grid; grid-template-columns:1fr 1fr; gap:23px; }.service-card { min-height:337px; padding:34px 38px; position:relative; overflow:hidden; }.sewing { background:#f6e4d5; }.printing { background:#dbe6d9; }.service-icon { float:right; display:grid; place-items:center; width:43px; height:43px; background:var(--paper); border-radius:50%; color:var(--terracotta); font-size:22px; }.printing .service-icon { color:var(--green); }.card-number { color:var(--terracotta); font-size:13px; font-weight:700; }.service-card h3 { clear:both; padding-top:50px; margin-bottom:9px; font-size:32px; }.service-card > p:not(.card-number) { max-width:400px; color:#536259; }.service-card ul { display:flex; flex-wrap:wrap; gap:8px 17px; list-style:none; padding:14px 0 0; margin:0; font-size:12px; font-weight:700; }.service-card li:before { content:"•"; padding-right:5px; color:var(--terracotta); }
.about { display:grid; grid-template-columns:.85fr 1fr; gap:110px; align-items:center; border-top:1px solid var(--line); }.about-visual { position:relative; height:360px; }.fabric { position:absolute; width:225px; height:292px; border-radius:110px 110px 22px 22px; }.fabric-back { top:13px; left:90px; background:repeating-linear-gradient(135deg,#d7a495 0 3px,#ebc4b8 3px 9px); transform:rotate(11deg); }.fabric-front { top:46px; left:10px; background:repeating-linear-gradient(45deg,#d9e5d6 0 3px,#b9cfb6 3px 9px); transform:rotate(-12deg); }.measuring-tape { position:absolute; right:10px; top:74px; width:155px; padding:11px 6px; color:#805a24; background:var(--mustard); font-size:24px; letter-spacing:7px; transform:rotate(59deg); }.about-copy p:not(.eyebrow) { max-width:490px; color:#536259; font-size:17px; }.about-copy .text-link { margin-top:10px; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:88px 72px; max-width:none; background:var(--green); color:#fff; }.contact .eyebrow { color:#f4bd69; }.contact h2 { color:#fff; }.contact h2 em { color:#f0bb69; }.contact-copy > p:not(.eyebrow) { max-width:350px; color:#d4dfd3; }.contact-details { display:flex; flex-direction:column; margin-top:35px; gap:10px; }.contact-details a { width:max-content; border-bottom:1px solid rgba(255,255,255,.45); font-size:14px; font-weight:600; }.contact-details span { padding-left:8px; color:#f4bd69; }.contact-form { display:grid; gap:16px; }.contact-form label { color:#e1eade; font-size:12px; font-weight:700; }.contact-form input,.contact-form select,.contact-form textarea { width:100%; margin-top:4px; padding:10px 0; display:block; border:0; border-bottom:1px solid rgba(255,255,255,.35); outline:0; resize:vertical; background:transparent; color:white; font:400 15px "DM Sans",sans-serif; }.contact-form input::placeholder,.contact-form textarea::placeholder { color:#bbccbb; }.contact-form select option { color:var(--ink); }.contact-form .button { width:max-content; margin-top:8px; background:var(--mustard); color:#243128; }.form-message { min-height:20px; margin:0; color:#f4bd69; font-size:13px; font-weight:700; }
footer { max-width:1200px; min-height:115px; padding:25px 32px; margin:auto; display:flex; align-items:center; justify-content:space-between; color:#6a756d; font-size:12px; } footer .brand { color:var(--ink); font-size:20px; } footer .brand-mark { width:29px; height:29px; font-size:14px; }
@media (max-width:800px) { .topbar { padding:18px 22px; }.menu-button { display:block; }.nav { display:none; position:absolute; z-index:10; right:22px; top:70px; padding:15px 20px; flex-direction:column; background:var(--paper); box-shadow:0 7px 20px #24312825; }.nav.open { display:flex; }.hero { min-height:auto; grid-template-columns:1fr; gap:50px; padding:68px 22px 56px; }.hero-art { width:300px; margin:auto; }.section { padding:75px 22px; }.section-heading { display:block; }.section-heading h2 { margin-top:6px; }.service-grid,.about,.contact { grid-template-columns:1fr; }.service-card { min-height:0; padding:29px; }.about { gap:45px; }.about-visual { height:300px; }.fabric-back { left:74px; }.measuring-tape { right:0; }.contact { gap:43px; padding:70px 22px; }.contact h2 { font-size:46px; } footer { padding:25px 22px; flex-wrap:wrap; gap:12px 24px; } }
@media (max-width:420px) { h1 { font-size:49px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:20px; }.hero-art { width:270px; }.about-visual { transform:scale(.85); transform-origin:left center; margin-bottom:-42px; }.service-card h3 { padding-top:35px; } footer p { margin:0; } }