/*font-start*/@font-face{font-family:'AOh Display';src:url(../fonts/display-a.woff2?v=c57d3818) format('woff2');font-weight:300 400;font-style:normal;font-display:block;unicode-range:U+B7,U+2014,U+2026,U+3000-3002,U+3008-300F,U+30A4,U+30AF,U+30B3,U+30B9-30BA,U+30BC,U+30C3,U+30C8,U+30D1,U+30EA-30EB,U+30ED,U+30F3,U+30FB-30FC,U+4E00,U+4E03,U+4E09-4E0B,U+4E0D,U+4E2D,U+4E3B,U+4E45,U+4E4B,U+4E5D,U+4E5F,U+4E7E,U+4E86,U+4E88,U+4E8B-4E8C,U+4E94,U+4E9B,U+4EA6,U+4EAB,U+4EAE,U+4EBA,U+4ECA-4ECB,U+4ECD,U+4ED6,U+4ED8,U+4EE3-4EE5,U+4EF2,U+4EF6,U+4EFB,U+4EFD,U+4F01,U+4F11,U+4F30,U+4F3C,U+4F46,U+4F48,U+4F4D-4F4F,U+4F55,U+4F5C,U+4F60,U+4F62,U+4F75,U+4F7F,U+4F86,U+4F88,U+4F8B,U+4F9B,U+4FC2-4FC3,U+4FDD,U+4FE1,U+4FEE,U+4FFE,U+500B,U+5011-5012,U+5019,U+503C,U+5047,U+505A,U+505C,U+5065,U+5074,U+5077,U+5085,U+5099,U+50B3,U+50B7,U+50BE,U+50CF,U+50F9,U+5145,U+5148-5149,U+514D,U+5165,U+5167-5169,U+516C-516D,U+5176-5177,U+5187,U+518D,U+51A0,U+51DD,U+51FA,U+5200,U+5206,U+521D,U+5225,U+5230,U+523A-523B,U+524D,U+525B,U+526A,U+526F,U+5275,U+529B,U+529F-52A0,U+52A9-52AA,U+52D5,U+52D9,U+52FA,U+5305,U+5316,U+5320,U+5341,U+5347,U+5357,U+5373,U+537B,U+539F,U+53BB,U+53C3,U+53C8,U+53CA-53CB,U+53CD,U+53D7,U+53E3,U+53EA,U+53EF-53F0,U+53F3,U+5404,U+5408,U+540A,U+540C-540D,U+5411,U+542B,U+5438-5439,U+544A,U+5462,U+547C-547D,U+5481,U+548C,U+5496-5497,U+54A8-54AA,U+54C1,U+54C8,U+54CB,U+54E1,U+54EA,U+5507,U+5514,U+554A,U+554F,U+5566,U+5572,U+5584,U+559C,U+55AE,U+55BA,U+55CE,U+55F0,U+5605,U+5668,U+5674,U+569F,U+56CA,U+56DB,U+56DE,U+56E0,U+56F0,U+56FA,U+570B,U+570D,U+5713,U+5716,U+5718,U+5728,U+5730,U+5747,U+578B,U+57CB,U+57F9-57FA,U+5802,U+5805,U+5831,U+5834,U+584A,U+5851,U+586B,U+5883,U+589E,U+58D3,U+58DE,U+58EB,U+5916,U+591A,U+5920,U+5927,U+5929-592A,U+5931,U+5957,U+5962,U+5973,U+5979,U+597D,U+5982,U+599D,U+59B3,U+59CB,U+59D0,U+5A18,U+5A66,U+5ABD,U+5AE9,U+5B50,U+5B54,U+5B57-5B58,U+5B78,U+5B89,U+5B8C,U+5B98,U+5B9A,U+5BA2,U+5BA4,U+5BB6,U+5BB9,U+5BC6,U+5BDF,U+5BE6,U+5BE9,U+5BEB,U+5C01,U+5C04,U+5C08,U+5C0D-5C0F,U+5C11,U+5C31,U+5C3E,U+5C55,U+5C64,U+5C6C,U+5CF0,U+5D17,U+5DE5-5DE6,U+5DEE,U+5DF1-5DF2,U+5E0C,U+5E2B,U+5E2D,U+5E36,U+5E38,U+5E3D,U+5E6B,U+5E73-5E74,U+5E78,U+5E7C,U+5E7E,U+5E95,U+5E97,U+5EA6,U+5EB7,U+5ED3,U+5EFA,U+5F0F,U+5F35,U+5F62,U+5F69,U+5F71,U+5F85,U+5F88,U+5F8B-5F8C,U+5F97,U+5F9E,U+5FA9-5FAA,U+5FAE,U+5FB7,U+5FC3,U+5FC5,U+5FEB,U+5FFD,U+600E,U+6015,U+6027,U+6062,U+606F,U+6085,U+6094,U+60C5,U+60F1,U+60F3,U+6108,U+610F,U+611B,U+611F,U+6162-6163,U+616E,U+6173,U+6176,U+61C2,U+61C9,U+61F6,U+6210-6211,U+6216,U+621A,U+622A,U+6230,U+6234,U+6236,U+624B,U+624D-624E,U+6253,U+627E,U+6280,U+628A,U+6293,U+6295,U+62AB,U+62C9,U+62CD,U+62EC,U+62FE-62FF,U+6301,U+6307,U+6309,U+6311,U+6372,U+6383,U+6388-6389,U+6392,U+639B,U+63A5,U+63A8,U+63C0,U+63D0,U+63DB,U+63EE,U+63F4,U+641E,U+642C,U+6435,U+6469,U+64A5,U+64C7,U+64CD,U+64D4,U+64EC,U+64F4,U+64FE,U+651D,U+652F,U+6536,U+6539,U+653F,U+6548,U+654F,U+6557,U+6559,U+6562-6563,U+6574,U+6578,U+6587,U+6591,U+6599,U+65B0,U+65B7,U+65B9,U+65BC-65BD,U+65C5,U+65CB,U+65E2,U+65E5,U+65E9,U+6602,U+660E,U+6613,U+661F,U+662F,U+6642,U+6652,U+6670,U+667A,U+6697,U+66EC,U+66F4,U+66F8,U+66FE,U+6700,U+6703,U+6708-6709,U+670B,U+670D,U+671B,U+671F,U+672A,U+672C,U+6790,U+6795,U+679C,U+67D3-67D4,U+67E5,U+6839,U+683C,U+6848,U+6897,U+689D,U+68D2,U+690D,U+695A,U+696D,U+6982,U+69CB,U+6A19,U+6A21,U+6A23,U+6A5F,U+6A62,U+6AA2,U+6B21,U+6B3E,U+6B62-6B63,U+6B65,U+6BB5,U+6BC5,U+6BCF,U+6BD2,U+6BD4,U+6BDB,U+6C11,U+6C27,U+6C34,U+6C38,U+6C42,U+6C57,U+6C7A,U+6C89,U+6C92,U+6CB9,U+6CBB,U+6CBF,U+6CC1,U+6CD5,U+6CE8,U+6D17,U+6D3B,U+6D41,U+6D77,U+6D88,U+6DB2,U+6DE1,U+6DE8,U+6DF1,U+6DFA,U+6E05,U+6E1B,U+6E2C,U+6E2F,U+6E90,U+6E96,U+6E9D,U+6EAB,U+6ECB,U+6EEF,U+6EF2,U+6EF4,U+6EFF,U+6F22,U+6F54,U+6FC0,U+6FC3,U+6FD5,U+700F,U+7063,U+7070,U+708E,U+70BA,U+70CF,U+7121,U+7126,U+7136,U+7165,U+7167,U+7169,U+719F,U+71C8,U+71D9,U+71DF,U+7247-7248,U+724C,U+7269,U+7279,U+72C0,U+7368,U+73ED,U+73FE,U+7406,U+74B0,U+74F6,U+751A,U+751F,U+7522,U+7528-7529,U+7531-7533,U+7537,U+754C,U+7559,U+7562,U+7565,U+756A-756B,U+7576,U+758F,U+75A4,U+75C2,U+75D5,U+75DB,U+7642,U+764C,U+767B-767D,U+7684,U+7687,U+76AE,U+76E1,U+76EE,U+76F4,U+76F8,U+7709,U+770B,U+771F-7720,U+773C,U+7747,U+7761,U+776B,U+7793,U+77E5,U+788E,U+7891,U+78BA,U+793A,U+793E,U+795E,U+79BF,U+79C1,U+79CB,U+79FB,U+7A00,U+7A05,U+7A0B,U+7A2E,U+7A69,U+7A7A,U+7A7F,U+7ABF,U+7ACB,U+7AD9,U+7B2C,U+7B46,U+7B56,U+7B97,U+7BA1,U+7BC0,U+7BC4,U+7C21,U+7C3D,U+7C73,U+7C89,U+7CBE,U+7D04-7D05,U+7D0B,U+7D0D,U+7D1A,U+7D20,U+7D2B,U+7D30,U+7D39,U+7D42,U+7D50,U+7D55,U+7D61,U+7D66,U+7D93,U+7DAD,U+7DB1-7DB2,U+7DCA,U+7DDA,U+7DF4,U+7DFB,U+7E2B,U+7E2E,U+7E3D,U+7E5E,U+7E61,U+7E7C,U+7E8C,U+7E8F,U+7F6E,U+7F72,U+7F8E,U+7FA4,U+7FA9,U+7FD2,U+7FF9,U+8001,U+8003,U+8005,U+800C,U+8010,U+805A,U+806F,U+8072,U+807D,U+808C,U+80AF,U+80B2,U+80CC,U+80DE,U+80FD,U+812B,U+8166,U+817A,U+818F,U+819A,U+81A0,U+81BD,U+81C9,U+81E8,U+81EA,U+81F3,U+8207,U+820A,U+8212,U+8216,U+822C,U+826F,U+8272,U+8292,U+82E6,U+8349,U+83DC,U+83EF,U+83F1,U+843D,U+8457,U+84B2,U+84CB,U+85CD,U+85CF,U+85DD,U+85E5,U+8655,U+865F,U+8679,U+86CB,U+881F,U+8840,U+884C,U+8853,U+8857,U+885B,U+885E,U+8861,U+8863,U+8868,U+888B,U+8896,U+88AB,U+88DC-88DD,U+88E1,U+8981,U+8986,U+898B,U+898F,U+8996,U+89AA,U+89BA,U+89BD,U+89C0,U+89D2,U+89E3,U+8A02,U+8A08,U+8A0A,U+8A13,U+8A1D,U+8A2D,U+8A34,U+8A3A,U+8A55,U+8A62,U+8A66,U+8A71-8A72,U+8A87,U+8A8C-8A8D,U+8AAA,U+8AB2,U+8ABF,U+8AC7,U+8ACB,U+8AD6-8AD7,U+8AEE,U+8B1B,U+8B1D,U+8B49,U+8B58,U+8B66,U+8B70,U+8B77,U+8B80,U+8B8A,U+8B93,U+8B9A,U+8C8C,U+8CA0,U+8CAC,U+8CB4,U+8CB7,U+8CBB-8CBC,U+8CC7,U+8CEA,U+8CF4,U+8CFC-8CFD,U+8D70,U+8D77,U+8D85,U+8D95,U+8DB3,U+8DD1,U+8DDF,U+8DEF,U+8EAB,U+8F03,U+8F15,U+8F2A,U+8F49,U+8F9B,U+8FA6,U+8FD1,U+8FD4,U+8FF7,U+9001,U+900F-9010,U+9014,U+9019-901A,U+901F-9020,U+9023,U+9031-9032,U+9047,U+904B,U+904E,U+9053-9054,U+9060,U+9069,U+906E,U+9078,U+907A,U+907F,U+9084,U+908A,U+90A3,U+90E8,U+90FD,U+914D,U+9152,U+91C7,U+91CC-91CD,U+91CF,U+91D1,U+91DD,U+92B7,U+9304,U+9322,U+93C8,U+93E1,U+9418,U+9577,U+9580,U+958B,U+9593,U+95B1,U+95C6,U+95CA,U+95DC,U+9632,U+9650,U+9663,U+966A,U+9673,U+967D,U+968A,U+968E,U+9699,U+969B,U+96AA,U+96B1,U+96C4,U+96C6,U+96D6,U+96D9,U+96E3,U+96F6,U+96FB,U+9700,U+9727,U+9732,U+9748,U+975E,U+9760,U+9762,U+978F,U+97D3,U+9801-9802,U+9805,U+9810,U+982D,U+984C-984D,U+984F,U+985E,U+9867,U+986F,U+98A8,U+98C4,U+98DF,U+98EF,U+98F2,U+990A,U+9996,U+9999,U+9A57,U+9A5A,U+9A5F,U+9AA8,U+9AD4,U+9AD8,U+9AEE,U+9D5D,U+9E7C,U+9E97,U+9EBC,U+9EC3,U+9ECE,U+9ED1,U+9EDE,U+FF01,U+FF05-FF06,U+FF08-FF09,U+FF0B-FF0C,U+FF0F,U+FF1A-FF1B,U+FF1F,U+FF5C,U+FF5E} @font-face{font-family:'AOh Display';src:url(../fonts/display-b.woff2?v=1fd3cf3d) format('woff2');font-weight:300 400;font-style:normal;font-display:block;unicode-range:U+3048,U+305F,U+307F,U+3081,U+308A,U+30A2-30A3,U+30AA,U+30AD,U+30B0,U+30B7,U+30BB,U+30BF,U+30C1,U+30C6,U+30C9-30CB,U+30D0,U+30D6-30D8,U+30DC-30DD,U+30DF-30E1,U+30E3,U+30E5,U+30E9,U+30EC,U+4E14,U+4E26,U+4E4E-4E4F,U+4E56,U+4E73,U+4E82,U+4E92,U+4E9E,U+4EA4,U+4ED4,U+4EFF,U+4F34,U+4F38,U+4F3A,U+4F3D,U+4F53-4F54,U+4F69,U+4F6C,U+4F73,U+4F9D,U+4FB5,U+4FBF,U+4FD0,U+4FEF,U+4FF1,U+500D,U+501A,U+501F,U+5026,U+504F,U+50C5,U+50F1,U+5100,U+512A,U+5132,U+5140,U+5143,U+514B,U+5152,U+5171,U+5178,U+5186,U+518A,U+51A5,U+51AC,U+51B0,U+51B7,U+51F8-51F9,U+5207,U+5217,U+5224,U+5229-522A,U+5236-5237,U+5243,U+5247,U+5254,U+5256,U+5269,U+5272,U+5283,U+5287,U+5291,U+52A3,U+52C1,U+52D2,U+52DE,U+52E2,U+52F5,U+52FB,U+52FE-52FF,U+5317,U+532F,U+5340,U+5343,U+534A,U+5351,U+5354,U+535A,U+5361,U+5370,U+5377-5378,U+5398,U+539A,U+53C9,U+53D6,U+53E5-53E6,U+53EB,U+53F2,U+53F8,U+5403,U+5413,U+541D,U+5426,U+543E,U+5440,U+5448,U+5468,U+5473,U+5480,U+54C2,U+54FA,U+552E-552F,U+5531,U+5546,U+555F,U+5561,U+5571,U+5594,U+559A,U+559D,U+55BC,U+55C7,U+5617,U+5622,U+5634,U+5687,U+56B4,U+5708,U+5712,U+5727,U+5740,U+574A,U+5750,U+5766,U+5782,U+57DF,U+57F7,U+5806,U+5835,U+584C,U+5857,U+585E,U+5875,U+588A,U+591C,U+5925,U+5938,U+593E,U+5947,U+596A,U+59A5,U+59B9,U+59CA,U+59D3-59D4,U+59FF,U+5A29,U+5A92,U+5AB2,U+5B30,U+5B55,U+5B63,U+5B83,U+5B85,U+5B88,U+5B9C,U+5BA3,U+5BB3-5BB4,U+5BC4,U+5BE7,U+5BEC,U+5BF8,U+5C07,U+5C0B,U+5C16,U+5C24,U+5C2C,U+5C37,U+5C3A,U+5C3F-5C40,U+5C45-5C46,U+5C4B,U+5C4F,U+5C51,U+5C71,U+5C80,U+5DE7,U+5DF4,U+5DFE,U+5E02-5E03,U+5E16,U+5E33,U+5E45,U+5E55,U+5E8F,U+5E9C,U+5EA7,U+5EAB,U+5EAD,U+5ECA,U+5EDA,U+5EE0,U+5EE2-5EE3,U+5EF6,U+5F04,U+5F15,U+5F1B,U+5F27,U+5F31,U+5F37,U+5F48,U+5F4E,U+5F77,U+5F80,U+5F91,U+5FB5,U+5FB9,U+5FCC-5FCD,U+5FD8,U+5FF5,U+601D,U+6025,U+6055,U+6069,U+608D,U+60A3,U+60A8,U+60B6,U+60D1,U+60E0,U+6109,U+614B-614C,U+6167,U+61B6,U+61F7,U+61FC,U+6225,U+6232,U+623F-6241,U+6247,U+6263,U+626E-626F,U+6279,U+627F,U+6297-6298,U+62B5,U+62B9,U+62BD,U+62C6,U+62CB,U+62CE,U+62D2,U+62D6,U+62DB,U+62F1,U+62FC,U+6368,U+6377,U+6382,U+638C,U+63A1-63A3,U+63A7,U+63A9-63AA,U+63CF,U+63D2,U+63E1,U+63ED,U+63F9,U+63FE,U+640D,U+640F,U+641C,U+642D,U+6436,U+643D,U+6478,U+647A,U+6492,U+6495,U+64A4,U+64AD,U+64B3,U+64C1,U+64CA,U+64DA,U+64FA,U+651C,U+6524,U+653B,U+653E,U+6545,U+6551,U+655E,U+6577,U+659C,U+65C1,U+65E6,U+665A,U+666E-666F,U+667E,U+6688,U+6696,U+66A2,U+66AB,U+66DD,U+66F2,U+66FF,U+6717,U+6728,U+674E,U+6750,U+675F,U+676F,U+6771,U+677F,U+679D,U+67AF,U+67B1,U+67B6,U+67C4,U+67D0,U+6821,U+682A,U+6838,U+6846,U+684C,U+6851,U+687F,U+68B3,U+68C4,U+6975,U+6A02,U+6A13,U+6A39,U+6A3D,U+6A61,U+6A6B,U+6A94,U+6AAF,U+6ABB,U+6B04,U+6B0A,U+6B20,U+6B4C,U+6B50,U+6B61,U+6B64,U+6B67,U+6B72,U+6B77-6B78,U+6B7B,U+6B98,U+6BBA,U+6BC0,U+6BCB,U+6BCD,U+6BEB,U+6C1B,U+6C23,U+6C2B,U+6C60-6C61,U+6C96,U+6CBE,U+6CC9,U+6CCC,U+6CDB,U+6CE1-6CE2,U+6CF3,U+6CF5,U+6D1E,U+6D32,U+6D3D,U+6D6A,U+6D6E,U+6D74,U+6D89,U+6DB5,U+6DBC,U+6DF7,U+6DFB,U+6E21,U+6E29,U+6E38,U+6EA2,U+6EB6,U+6ED1,U+6EFE,U+6F02,U+6F0F,U+6F14,U+6F2C,U+6F38,U+6F51,U+6F64,U+6F6E,U+6FA4,U+6FB1,U+6FDF,U+704C,U+7051,U+7058,U+70B8,U+70C8,U+7159,U+71B1,U+71D5,U+71E5,U+7206,U+721B,U+722D,U+7236,U+723D-723E,U+7246,U+7280,U+72E0,U+734E,U+7372,U+7387,U+738B,U+73AB,U+73BB,U+7403,U+7434,U+7455,U+745C,U+7470,U+7483,U+751C,U+7540,U+7570,U+7587,U+758A,U+7591,U+75AB,U+75B2,U+75B5,U+75B9,U+75BC,U+75BE,U+75C5,U+75C7,U+7621-7622,U+7624,U+7652,U+7662,U+767E,U+7686,U+76B0,U+76C8,U+76CA,U+76D2,U+76DB-76DC,U+76DE,U+76E3-76E4,U+7701,U+773E,U+7740,U+775B,U+7763,U+776A,U+779E,U+77ED-77EF,U+77F3,U+7802,U+7814,U+7834,U+786B-786C,U+78B0,U+78B3,U+78BC,U+78E8,U+790E,U+7919,U+7956,U+795D,U+7981,U+798F,U+79AE,U+79C0,U+79D1-79D2,U+79DF,U+7A0D,U+7A1C,U+7A31,U+7A3F,U+7A4D,U+7A76,U+7A81,U+7A84,U+7A97,U+7AE0,U+7AEF,U+7AF6,U+7B26,U+7B28,U+7B49,U+7B4B,U+7B52,U+7B54,U+7BAD,U+7BB1,U+7BC7,U+7BE4,U+7BE9,U+7C27,U+7C64,U+7C92,U+7C97,U+7CCA,U+7CD6,U+7CD9,U+7CFB,U+7D00,U+7D14,U+7D19,U+7D22,U+7D2E,U+7D44,U+7D68,U+7D71-7D72,U+7D9C,U+7DA0,U+7DDE,U+7DE3,U+7DE8-7DE9,U+7DEF,U+7E31,U+7E41,U+7E43,U+7E54,U+7E69,U+7E6B,U+7E73,U+7F3A,U+7F69,U+7FFB,U+8017,U+8033,U+8046,U+804A,U+8058,U+8077,U+8089,U+8098,U+809D,U+80BD,U+80CE,U+80DC,U+80FA,U+8102,U+8106,U+810A,U+816B,U+816E,U+8179,U+817F,U+819C,U+81A9,U+81BF,U+81DF,U+81F4,U+8208,U+82B1,U+82E5,U+82F1,U+8336,U+8354,U+8377,U+83CC,U+840E,U+842C,U+8499,U+84B8,U+84BC,U+84EC,U+8584,U+8591,U+85A6,U+85AA,U+860B,U+864E,U+865B,U+878D,U+87A2,U+87F9,U+885D,U+8870,U+88C1-88C2,U+88CF,U+88FD,U+8907,U+892A,U+896F,U+897F,U+89F8,U+8A00,U+8A0E,U+8A18,U+8A2A,U+8A31,U+8A3B,U+8A70,U+8A73,U+8A98,U+8A9E,U+8AA4,U+8AB0,U+8AFE,U+8B5C,U+8C46,U+8C50,U+8C61,U+8C6C,U+8C93,U+8CA8,U+8CAA,U+8CDE,U+8CE3-8CE4,U+8CEC,U+8D74,U+8D8A,U+8DA3,U+8DA8,U+8DDD,U+8DE1,U+8DF3,U+8E10,U+8EBA,U+8ECC-8ECD,U+8EF8,U+8F09,U+8F38,U+8F44,U+8FA3,U+8FA8,U+8FC5,U+8FCE,U+8FEB,U+8FF0,U+8FFD,U+9000,U+9017,U+9038,U+903E,U+904A,U+904D,U+9072,U+9075,U+9080,U+90C1,U+90F5,U+9130,U+916E,U+9175-9176,U+9178,U+9187,U+9189,U+9192,U+91AB-91AC,U+91CB,U+925B,U+9280,U+9285,U+929C,U+92C5,U+92EA,U+932F,U+934B,U+9375,U+937E,U+9396,U+93AE,U+9435,U+947D,U+9583,U+9589,U+95A3,U+963B,U+9644,U+964D,U+9662,U+9664,U+9678,U+9686,U+9694,U+969C,U+96A8,U+96BB,U+96C0,U+96C5,U+96CC,U+96DC,U+96DE,U+96E2,U+96E8,U+96F2,U+9707,U+971C,U+975A,U+975C,U+97CC,U+97F3,U+97FF,U+9806,U+9808,U+9812,U+9818,U+9830,U+983B,U+984E,U+9858,U+9874,U+98FD-98FE,U+9910,U+9918,U+994B,U+99AC,U+99D0,U+9A30,U+9B06,U+9B42,U+9E7D,U+9EA5,U+9EB5,U+9EBB,U+9ECF-9ED0,U+9F13,U+9F20,U+9F4A,U+9F61,U+9F8D,U+FF1D}/*font-end*/ /* AOh! Beauty 全站樣式（由首頁抽出，2026-09-23）。改呢度即全站生效。 */ :root{--canvas:#f9eeef;--surface:#fffaf8;--ink:#382d2e;--muted:#766265;--accent:#80575e;--soft:#e7cdd0;--line:#cbb9ba;--display:Georgia,'AOh Display','Songti TC','PMingLiU',serif;--body:-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei',sans-serif;--xs:.75rem;--sm:.875rem;--base:1rem;--lg:clamp(1.25rem,2vw,1.6rem);--title:clamp(1.85rem,3.4vw,3.4rem);--gutter:clamp(24px,5vw,88px);--section:clamp(64px,8vw,120px);--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--canvas);color:var(--ink);font:var(--base)/1.85 var(--body);-webkit-font-smoothing:antialiased}body.lock{overflow:hidden}img{display:block;width:100%;height:auto}button,a,summary,input{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit;cursor:pointer}a,button{touch-action:manipulation}a:hover{opacity:.78}button:hover{opacity:.86}a:active,button:active{transform:translateY(1px)}:focus-visible{outline:3px solid #95666e;outline-offset:5px}p{margin:0 0 var(--s6);text-wrap:pretty}h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.5;text-wrap:balance}h2{font-size:var(--title);letter-spacing:.08em}h3{font-size:var(--lg)}figure{margin:0}small,.note{font-size:var(--xs);line-height:1.8;color:var(--muted)}.wrap{max-width:1280px;margin:auto;padding-inline:var(--gutter)}.section{padding-block:var(--section)}.kicker{font-family:var(--display);font-size:var(--sm);letter-spacing:.13em;display:block;margin-bottom:var(--s6)}.text-link{display:inline-flex;align-items:center;gap:var(--s6);border-bottom:1px solid currentColor;padding:var(--s3) 0;min-height:44px;font-size:var(--sm)}@property --ga{syntax:"";initial-value:0deg;inherits:false}@property --gp{syntax:"";initial-value:8%;inherits:false}.pill{position:relative;isolation:isolate;overflow:hidden;border:1.5px solid transparent;border-radius:100px;display:inline-flex;justify-content:space-between;align-items:center;gap:var(--s8);padding:var(--s3) var(--s8);min-height:54px;font-size:var(--sm);letter-spacing:.06em;color:#fff9f7;background:linear-gradient(var(--accent),var(--accent)) padding-box,conic-gradient(from var(--ga),#ffffff00,#dcc6c4 var(--gp),#f6eae4 calc(var(--gp)*2),#dcc6c4 calc(var(--gp)*3),#ffffff00 calc(var(--gp)*4)) border-box;box-shadow:0 10px 26px -18px #56323a8c;animation:shine calc(var(--dur-float)*1.07) linear infinite;transition:--gp var(--dur-base) ease,transform var(--dur-fast),box-shadow var(--dur-fast),opacity var(--dur-fast)}.pill:before{content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;background:linear-gradient(105deg,#fff0 34%,#ffffff0d 44%,#ffffff29 50%,#ffffff0d 56%,#fff0 66%);transform:translateX(-135%);animation:pill-sweep calc(var(--dur-float)*1.07) cubic-bezier(.45,0,.5,1) infinite}@keyframes pill-sweep{0%{transform:translateX(-135%)}24%,100%{transform:translateX(135%)}}.pill:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 2px 2px,#ffffff 0.5px,transparent 0) 0 0/4px 4px;opacity:.22;pointer-events:none}.pill.light{color:var(--ink);background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--ga),#c9a9ae00,#d8c2c5 var(--gp),#bb9ba1 calc(var(--gp)*2),#d8c2c5 calc(var(--gp)*3),#c9a9ae00 calc(var(--gp)*4)) border-box;box-shadow:0 10px 24px -18px #56323a5c}.pill.light:before{background:linear-gradient(105deg,#fff0 34%,#ffffff29 44%,#ffffff7a 50%,#ffffff29 56%,#fff0 66%)}.pill.glass{color:#fffdf8;background:linear-gradient(#30272599,#30272599) padding-box,conic-gradient(from var(--ga),#ffffff00,#e3c6c0 var(--gp),#f8eee8 calc(var(--gp)*2),#e3c6c0 calc(var(--gp)*3),#ffffff00 calc(var(--gp)*4)) border-box;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 12px 30px -20px #000000b3}.pill.glass:after{opacity:.12}.pill.light:after{background-image:radial-gradient(circle at 2px 2px,#80575e 0.5px,transparent 0);opacity:.14}.pill:active{--gp:13%;transform:translateY(1px)}@media (hover:hover){.pill:hover{--gp:13%;opacity:1}}@keyframes shine{to{--ga:360deg}}@media (prefers-reduced-motion:reduce){.pill,.pill:before{animation:none}.pill:before{opacity:0}}.skip{position:fixed;top:0;left:10px;z-index:200;background:var(--surface);padding:12px;transform:translateY(-110%)}.skip:focus{transform:none}.site-header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px var(--gutter);height:88px;background:#f9eeefd9;backdrop-filter:blur(14px);border-bottom:1px solid #ffffff70}.brand{display:flex;align-items:center;gap:12px}.brand img{width:55px;height:55px;object-fit:contain}.brand-word{font:21px/1.1 var(--display);letter-spacing:.07em}.brand-word small{display:block;font:12px/2 var(--body);letter-spacing:.18em}.header-right{display:flex;align-items:center;gap:24px}.desktop-nav{display:flex;gap:28px;font-size:13px}.menu-button{border:0;background:none;width:44px;height:44px;display:grid;align-content:center;gap:7px;padding:10px}.menu-button span{height:1px;background:var(--ink);width:24px}@property --cell{syntax:"";initial-value:12px;inherits:false}.menu-dialog{padding:0;background:transparent;color:var(--ink);border:0;overflow:hidden;width:min(540px,100%);height:100dvh;max-height:100dvh;max-width:100%;margin:0 0 0 auto}.menu-dialog::backdrop{background:#30272b00;backdrop-filter:blur(0px);transition:background var(--dur-fast) var(--ease),backdrop-filter var(--dur-fast) var(--ease)}.menu-dialog.is-open::backdrop{background:#30272b8c;backdrop-filter:blur(6px)}.menu-dialog:not(.is-open)::backdrop{transition-duration:var(--dur-quick)}.m-panel{position:absolute;inset:0;transform:translateX(101%);transition:transform var(--dur-enter) cubic-bezier(.65,.01,.05,.99) calc(var(--p)*.085s)}.m-panel:nth-child(1){background:var(--soft)}.m-panel:nth-child(2){background:#f4e5e6}.m-panel:nth-child(3){background:var(--canvas)}.menu-dialog.is-open .m-panel{transform:none}.menu-dialog:not(.is-open) .m-panel{transition-duration:var(--dur-quick);transition-delay:calc((2 - var(--p))*.05s)}.m-dots{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,#80575e 1.15px,transparent 0) 0 0/var(--cell) var(--cell);-webkit-mask-image:radial-gradient(58% 46% at 74% var(--my,50%),#000,transparent 74%);mask-image:radial-gradient(58% 46% at 74% var(--my,50%),#000,transparent 74%);transition:opacity var(--dur-base),--cell var(--dur-enter) var(--ease),--my var(--dur-base) ease}.menu-dialog.dots-on .m-dots{opacity:.3}@media (hover:none){.menu-dialog.is-open .m-dots{opacity:.16;--cell:9px}}.m-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:88px var(--gutter) 40px}.m-inner nav{display:grid;margin-top:auto;margin-bottom:auto}.m-inner>.note{margin:0}.menu-dialog nav a{font:27px/1.4 var(--display);overflow:hidden;display:block}.menu-dialog nav a small{font:12px var(--body);margin-left:20px}.m-rise{display:block;padding:22px 0;will-change:transform}.menu-dialog nav .m-rise{border-bottom:1px solid var(--line)}.m-inner>.kicker.m-rise,.m-inner>.note.m-rise{padding:0}.menu-dialog .m-rise{transform:translateY(130%) rotate(7deg);opacity:0;transition:transform var(--dur-enter) cubic-bezier(.65,.01,.05,.99),opacity var(--dur-base) var(--ease)}.menu-dialog.is-open .m-rise{transform:none;opacity:1;transition-delay:calc(.3s + (var(--i) + 1)*.055s)}.menu-dialog:not(.is-open) .m-rise{transition-duration:var(--dur-fast);transition-delay:0s}.menu-dialog nav a:hover{opacity:1}.menu-dialog nav a:hover .m-rise{transform:translateX(10px)}.menu-dialog .close{transform:rotate(-90deg) scale(.6);opacity:0;transition:transform var(--dur-base) cubic-bezier(.65,.01,.05,.99) .28s,opacity var(--dur-base) var(--ease) .28s}.menu-dialog.is-open .close{transform:none;opacity:1}@media (prefers-reduced-motion:reduce){.m-panel,.menu-dialog .m-rise,.menu-dialog .close{transform:none!important;opacity:1!important;transition:none!important}.m-dots{display:none}}.close{border:1px solid var(--line);background:var(--surface);border-radius:50%;width:44px;height:44px;font-size:24px}.menu-dialog .close{position:absolute;right:var(--gutter);top:24px} .hero{height:115svh;min-height:820px;position:relative;background:var(--canvas)}.hero-stage{height:100svh;min-height:710px;position:sticky;top:0;overflow:hidden;isolation:isolate}.hero-back{position:absolute;inset:0;height:100%;object-fit:cover;object-position:58% 30%;transform:scale(1.06);will-change:transform}.hero-tint{position:absolute;inset:0;background:#ffffff0f}.hero-frost{position:absolute;inset:48% -15% -30%;border-radius:50% 50% 0 0;background:#e7ded6ad;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);z-index:2;transform:translateY(0)}.hero-shade{position:absolute;inset:47% 0 0;background:linear-gradient(transparent,#302a29aa);z-index:3}.hero-content{position:absolute;z-index:4;inset:auto 16px 0;padding-bottom:clamp(92px,15svh,150px);text-align:center;color:#fffefb;text-shadow:0 1px 3px #5a4b4459,0 2px 22px #4a3d3773}.hero-name{font:clamp(36px,4.5vw,68px)/1 var(--display);letter-spacing:.11em;margin:0 0 20px}.hero-sub{font-size:12px;letter-spacing:.3em;margin-bottom:26px;text-shadow:0 1px 2px #5a4b4480,0 1px 14px #4a3d3799}.hero h1{font-size:clamp(24px,2.6vw,38px);letter-spacing:.12em;line-height:1.6}.hero-description{font-size:13.5px;letter-spacing:.12em;margin:14px auto 0;max-width:34em;text-shadow:0 1px 2px #5a4b4480,0 1px 14px #4a3d3799}.hero-foot{position:absolute;z-index:4;bottom:35px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;color:#fffdf8;font:12px var(--display);letter-spacing:.08em}.hero-services{display:flex;gap:12px;justify-content:center;margin-top:26px}.hero-services .pill{min-height:50px;padding:12px 24px;font-size:14px;gap:12px;text-shadow:none} .editorial{position:relative;min-height:112svh;overflow-x:clip;background:#aaa4a0;color:#fffaf7;isolation:isolate}.editorial>.scene,.editorial>picture>.scene{position:sticky;top:0;width:100%;height:100svh;object-fit:cover;object-position:center;z-index:0;margin-bottom:-100svh}.editorial>.wrap{position:relative;z-index:2;padding-block:24svh 18svh}.editorial:after{z-index:1}.editorial>.scene-label,.editorial>picture>.scene-label{z-index:2}.editorial+section{position:relative;z-index:3;background:var(--canvas);border-radius:26px 26px 0 0;margin-top:-26px}.editorial:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#282326ad,transparent 80%),linear-gradient(0deg,#30272a99,transparent 55%);z-index:-1}.editorial .wrap{padding-top:var(--section);padding-bottom:64px;position:relative}.editorial .section-word{font:clamp(64px,12vw,170px)/1 var(--display);letter-spacing:-.03em;color:#fff8;margin-bottom:36px}.editorial h2{max-width:17ch;margin-bottom:24px}.editorial .copy{max-width:31em;font-size:15px;line-height:2}.editorial .cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:480px;margin-top:56px}.editorial .cards img{aspect-ratio:4/3;object-fit:cover}.editorial .cards figcaption{font-size:12px;margin-top:10px;letter-spacing:.05em}.editorial .scene-label{font-size:12px;color:#fffd;position:absolute;right:20px;bottom:16px}.brow-scene>.scene,.brow-scene>picture>.scene{object-position:60% 52%}.smp-scene>.scene,.smp-scene>picture>.scene{object-position:55% 30%}.service-intro{text-align:center;max-width:760px;margin:0 auto var(--s16)}.service-intro p{margin-top:24px;color:var(--muted)}.service-intro .english{font:clamp(34px,5vw,65px)/1.2 var(--display);margin-bottom:24px;letter-spacing:-.02em}.styles{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:64px}.style img{aspect-ratio:4/3;object-fit:cover}.style .info{padding:24px 0;border-bottom:1px solid var(--line)}.style h3{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.style p{font-size:14px;color:var(--muted);margin-bottom:0}.style small{font:12px var(--body)}.service-end{text-align:center}.service-end p{max-width:600px;margin:0 auto 24px;font-size:14px;color:var(--muted)}.craft{padding:0 var(--gutter);background:var(--canvas)}.craft-inner{position:relative;max-width:1440px;margin:auto;aspect-ratio:16/8;overflow:hidden;isolation:isolate;transform:scale(.95)}.craft-inner img{height:100%;object-fit:cover}.craft-inner:after{content:'';position:absolute;inset:0;background:#221a205e}.craft-copy{position:absolute;inset:0;z-index:2;display:grid;align-content:center;justify-items:center;color:white;text-align:center;padding:32px}.craft-copy p{font:15px var(--display);letter-spacing:.12em;margin-bottom:20px}.craft-copy h2{font-size:clamp(24px,3vw,42px)}.craft-copy small{position:absolute;bottom:20px;color:white}.process{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px)}.process .intro p{margin-top:24px;color:var(--muted);font-size:15px}.steps{list-style:none;margin:0;padding:0}.steps li{display:grid;grid-template-columns:40px 1fr;gap:24px;padding:24px 0;border-top:1px solid var(--line)}.steps .number{font:24px var(--display);color:var(--accent)}.steps h3{font-size:20px;margin-bottom:8px}.steps p{font-size:14px;color:var(--muted);margin:0}.facts{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line);padding:28px 0;margin:32px 0}.facts>div+div{border-left:1px solid var(--line);padding-left:28px}.facts strong{display:block;font:32px/1.4 var(--display)}.facts span{font-size:12px;color:var(--muted)} .compare-section{background:var(--surface)}.compare-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:64px;align-items:center}.compare{position:relative;overflow:hidden;aspect-ratio:1;background:#d8d1ca;--reveal:50%}.compare img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover}.compare .after{clip-path:inset(0 0 0 var(--reveal))}.compare-line{position:absolute;left:var(--reveal);top:0;bottom:0;width:1px;background:white;pointer-events:none}.compare-line:after{content:'↔';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fffdf4;color:var(--ink);box-shadow:0 4px 16px #0002}.compare-tag{position:absolute;top:16px;background:#fffdf6e8;padding:5px 12px;font-size:12px;letter-spacing:.08em}.compare-tag.right{right:16px}.compare-tag.left{left:16px}.compare-control{margin:16px 0 0;display:flex;gap:16px;align-items:center}.compare-control label{font-size:12px;white-space:nowrap}.compare-control input{width:100%;accent-color:var(--accent);min-height:44px}.compare-copy p{margin-top:24px;color:var(--muted);font-size:15px}.anatomy{display:flex;gap:24px;align-items:center;background:var(--canvas);padding:24px;margin-top:28px}.anatomy img{width:110px;flex-shrink:0}.anatomy p{font-size:13px;margin:0}.anatomy b{display:block;color:var(--ink);margin-bottom:8px}.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:24px}.filter-bar{display:flex;gap:8px;margin:36px 0}.filter-bar button{padding:10px 24px;border:1px solid var(--line);background:none;border-radius:30px;font-size:13px;min-height:44px}.filter-bar button[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 20px}.case[hidden]{display:none}.case-open{display:block;border:0;background:none;width:100%;padding:0;text-align:left}.case-images{display:block;overflow:hidden;background:#ddd5d0}.case-images img{aspect-ratio:1;object-fit:cover;transition:transform var(--dur-enter) var(--ease)}.case-open:hover img{transform:scale(1.035)}.case-images.paired{display:grid;grid-template-columns:1fr 1fr}.case-images.paired img{aspect-ratio:1/2;object-fit:cover}.case-meta{font:12px/1.4 var(--body);letter-spacing:.1em;display:flex;justify-content:space-between;margin:14px 0 6px}.case figcaption{font-size:14px}.gallery-note{margin-top:32px}.count{font-size:12px;color:var(--muted)}.team{background:#e9dadd}.team-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center}.team-photo img{aspect-ratio:4/5;object-fit:cover}.team-photo figcaption{font-size:12px;margin-top:12px;color:var(--muted)}.team h2{margin-bottom:28px}.team p{font-size:15px}.team .statement{font-family:var(--display);font-size:22px;line-height:1.8}.faq-layout{display:grid;grid-template-columns:1fr 1fr;gap:64px}.faq-col h3{margin-bottom:24px}.faq-col details{border-top:1px solid var(--line)}.faq-col details:last-child{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:14px;min-height:64px}summary::-webkit-details-marker{display:none}summary span{font-size:20px;color:var(--accent)}details[open] summary span{transform:rotate(45deg)}details p{font-size:14px;line-height:1.9;color:var(--muted);padding-bottom:20px;margin:0}.more{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:64px;padding-top:36px}.more h3{font-size:20px;margin:12px 0}.more p{font-size:13px;color:var(--muted)}.journal{display:grid;grid-template-columns:1fr 2fr;gap:64px}.journal-links a{display:flex;gap:24px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0}.journal-links small{display:block;font-size:12px;margin-bottom:8px}.journal-links h3{font-size:19px}.contact{position:relative;min-height:650px;display:flex;align-items:center;isolation:isolate;overflow:hidden;background:#d4cdca}.contact>.scene,.contact>picture>.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.contact:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eee8e4f2,#eee8e470 48%,transparent 65%);z-index:-1}.contact .wrap{width:100%;padding-block:80px}.contact h2{font-size:clamp(32px,4.3vw,58px);margin-bottom:24px}.contact p{max-width:30em;font-size:14px}.contact-actions{display:flex;gap:12px;flex-wrap:wrap}.visit{display:grid;grid-template-columns:1fr 1fr;gap:64px;padding-block:56px}.visit address{font-style:normal;font-size:14px}.visit h3{font-size:20px;margin-bottom:20px}.visit p{font-size:14px;margin:0}.footer{padding:48px var(--gutter) 105px;border-top:1px solid var(--line)}.footer-top{display:flex;justify-content:space-between;align-items:center;gap:32px}.footer-title{font:clamp(40px,8vw,112px)/1 var(--display);letter-spacing:-.035em}.footer-links{display:flex;gap:24px;flex-wrap:wrap;font-size:12px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:24px;margin-top:40px;font-size:12px;color:var(--muted)}.image-dialog{padding:24px;border:0;background:var(--surface);color:var(--ink);max-width:960px;width:calc(100% - 32px);max-height:90dvh}.image-dialog::backdrop{background:#281e27db}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}.dialog-head h2{font-size:22px}.dialog-images{display:flex;gap:12px;justify-content:center}.dialog-images img{width:100%;max-height:65dvh;object-fit:contain;min-width:0}.dialog-images:has(img+img) img{width:calc(50% - 6px)}.dialog-note{font-size:12px;margin-top:16px}.reveal{opacity:1}.js-motion .reveal{transition:opacity var(--dur-enter),transform var(--dur-enter) var(--ease)}.js-motion .reveal.pending{opacity:0;transform:translateY(22px)} @media(min-width:1500px){.hero-back{object-position:58% 30%}} @media(max-width:800px){.site-header{height:74px;padding:10px 20px}.brand img{width:44px;height:44px}.brand-word{font-size:17px}.brand-word small{font-size:12px}.header-right{gap:12px}.header-right>.pill{font-size:12px;padding:8px 16px;min-height:42px}.desktop-nav{display:none}.hero{height:108svh;min-height:770px}.hero-stage{min-height:700px}.hero-back{object-position:51% 25%}.hero-content{padding-bottom:clamp(74px,12svh,120px)}.hero-content{color:var(--ink);text-shadow:none}.hero-services .pill.glass{color:#fff9f7;-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#80575eeb,#80575eeb) padding-box,conic-gradient(from var(--ga),#ffffff00,#e3c6c0 var(--gp),#f8eee8 calc(var(--gp)*2),#e3c6c0 calc(var(--gp)*3),#ffffff00 calc(var(--gp)*4)) border-box;box-shadow:0 12px 26px -18px #56323a99}.hero-name{color:#2f2526}.hero-sub,.hero-description{color:#5f4d49;text-shadow:none}.hero h1{color:#2f2526}.hero-name{font-size:38px;margin-bottom:12px}.hero-sub{font-size:12px;margin-bottom:22px}.hero h1{font-size:24px;letter-spacing:.09em}.hero-description{max-width:23em;font-size:12px}.hero-services{margin-top:20px}.hero-services a{padding:10px 22px;font-size:12px}.hero-foot{bottom:26px;font-size:12px}.hero-frost{inset:50% -38% -25%}.editorial{min-height:108svh}.editorial>.wrap{padding-block:20svh 14svh}.editorial .section-word{font-size:76px;margin-bottom:28px}.editorial h2{font-size:29px;max-width:15ch}.editorial .copy{font-size:14px;max-width:26em}.editorial:after{background:linear-gradient(90deg,#282326c2,#28232670 58%,transparent 88%),linear-gradient(0deg,#30272ab3,transparent 65%)}.brow-scene>.scene,.brow-scene>picture>.scene{object-position:66% center}.smp-scene>.scene,.smp-scene>picture>.scene{object-position:61% center}.editorial .cards{gap:14px;margin-top:64px}.editorial .cards figcaption{font-size:12px}.styles{gap:20px}.style img{aspect-ratio:1}.style h3{display:block;font-size:21px}.style h3 small{display:block;margin-top:8px}.style p{font-size:13px}.service-intro{margin-bottom:40px}.service-intro .english{font-size:40px}.craft{padding:0 12px}.craft-inner{aspect-ratio:3/4}.craft-inner img{object-position:40% center}.process,.compare-layout,.team-grid,.faq-layout,.journal{grid-template-columns:1fr;gap:40px}.process .intro{max-width:600px}.gallery{grid-template-columns:1fr 1fr;gap:28px 16px}.gallery-head{align-items:start;display:block}.count{margin-top:16px;display:block}.filter-bar{margin:24px 0}.filter-bar button{padding:8px 22px}.team-photo img{aspect-ratio:4/3;object-fit:contain}.team .statement{font-size:20px}.more{grid-template-columns:1fr;gap:24px}.more article{border-bottom:1px solid var(--line);padding-bottom:24px}.more p{margin-bottom:8px}.contact{min-height:790px;align-items:end}.contact>.scene,.contact>picture>.scene{object-position:65% top}.contact:after{background:linear-gradient(0deg,#f9eeeffa,#f9eeefcf 38%,transparent 70%)}.contact .wrap{padding-block:60px 84px}.contact h2{font-size:32px}.contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.contact-actions .pill{padding:12px 16px;font-size:12px;gap:12px}.visit{grid-template-columns:1fr;gap:32px}.footer-top{display:block}.footer-title{margin-bottom:30px;font-size:57px}.footer-links{gap:12px 24px}.footer-bottom{display:block;font-size:12px}.footer-bottom span{display:block;margin-top:8px}.image-dialog{padding:16px}.dialog-head h2{font-size:19px}.anatomy{padding:20px;gap:16px}.anatomy img{width:90px}} @media(max-height:720px) and (min-width:801px){.hero-stage{min-height:710px}.hero{min-height:800px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.hero{height:auto;min-height:0}.hero-stage{position:relative;height:max(740px,100svh)}.hero-back,.hero-frost,.craft-inner{will-change:auto}.reveal{opacity:1!important;transform:none!important}} /* Second visual pass: readable small labels and compact mobile navigation. */ .header-right>.pill{white-space:nowrap;flex-shrink:0}.brand-word small{letter-spacing:.07em}.menu-button{flex-shrink:0}.hero-frost{background:#e7ded685}.hero-shade{inset:44% 0 0;background:linear-gradient(transparent,#ddd3ca2e 52%,#cfc4ba42)}.hero-sub{letter-spacing:.18em}.team-photo img{aspect-ratio:3/2;object-fit:contain}.contact .wrap{margin-block:0}.hero-foot{bottom:84px} @media(max-width:800px){.brand{gap:6px}.brand img{width:36px;height:36px}.brand-word{font-size:16px;white-space:nowrap}.brand-word small{display:none}.header-right{gap:6px}.header-right>.pill{padding:8px 12px;gap:10px}.site-header{padding-inline:16px}.hero-sub{font-size:12px;letter-spacing:.12em}.hero-foot{display:none}.contact .wrap{padding-block:60px 84px}.team-photo img{aspect-ratio:3/2}} /* ── 數字帶（count up）── */ .stats{border-bottom:1px solid var(--line);background:var(--surface)} .hero+.stats{position:relative;z-index:6;margin-top:-30px;border-radius:26px 26px 0 0;overflow:hidden} .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)} .stats-grid div{background:var(--surface);padding:22px var(--gutter)} .stats b{display:block;font:clamp(28px,7vw,40px)/1 var(--display);color:var(--accent);letter-spacing:.02em} .stats b i{font-style:normal;font-size:.5em;margin-left:2px} .stats span{display:block;font-size:var(--xs);letter-spacing:.12em;color:var(--muted);margin-top:8px}.stats b span{display:inline;font:inherit;color:inherit;letter-spacing:inherit;margin:0} @media(min-width:760px){.stats-grid{grid-template-columns:repeat(4,1fr)}} /* ── 療程旅程（插畫步驟）── */ .journey{list-style:none;margin:var(--s8) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s8) var(--s3)} .journey li{flex:0 1 calc((100% - var(--s3)*2)/3);max-width:186px;display:flex;flex-direction:column;align-items:center;text-align:center} .journey .art{width:100%;aspect-ratio:1;display:grid;place-items:center} /* --nx 係逐張人手校正嘅水平位移，令每格個頭都對正中線（手／工具會伸出畫面外，bbox 唔可靠）*/ .journey .art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transform:translateX(var(--nx,0)) scale(.95)} .journey .art.empty{background:repeating-linear-gradient(45deg,#f6ecec 0 9px,#efe2e3 9px 18px); font:11px var(--body);letter-spacing:.1em;color:#a08d90} .journey .no{display:block;font:11px var(--display);letter-spacing:.18em;color:var(--accent);margin:var(--s2) 0 2px} .journey h3{font-size:13.5px;line-height:1.5} .journey p{font-size:11.5px;line-height:1.7;color:var(--muted);margin:6px 0 0} @media(min-width:760px){.journey{gap:var(--s8) var(--s4)} .journey li{flex:0 1 calc((100% - var(--s4)*4)/5);max-width:228px} .journey h3{font-size:15px}.journey p{font-size:var(--xs)} /* desktop：插圖唔好塞喺右邊半欄（會細到睇唔到），改成引言在上、五步全寬 */ .process{display:block} .process .intro{max-width:620px} .journey{margin-top:var(--s16);justify-content:space-between}} /* ── 好評牆 ── */ .voices{background:var(--surface);border-block:1px solid var(--line)} /* ── Google 五星好評：公開、有名有姓嗰層 ── */ .g-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s8);margin-top:var(--s8); padding:var(--s4) var(--s6);background:#fff;border:1px solid #ece0da;border-radius:18px} .g-score{display:flex;align-items:center;gap:10px} .g-score b{font:400 32px/1 var(--display);color:var(--ink)} .g-stars{letter-spacing:.16em;color:#dda63f;font-size:14px} .g-bar p{margin:0;font-size:13px;line-height:1.7;color:var(--muted)} .g-bar a{border-bottom:1px solid var(--line);white-space:nowrap} .g-logo{font:700 17px/1 Arial,Helvetica,sans-serif;letter-spacing:-.04em} .g-logo i:nth-child(1){color:#4285f4}.g-logo i:nth-child(2){color:#ea4335}.g-logo i:nth-child(3){color:#fbbc05} .g-logo i:nth-child(4){color:#4285f4}.g-logo i:nth-child(5){color:#34a853}.g-logo i:nth-child(6){color:#ea4335} .g-logo i{font-style:normal} .g-wall{list-style:none;margin:var(--s6) 0 0;padding:0 0 var(--s4);display:grid;gap:var(--s4); grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none} .g-wall::-webkit-scrollbar{display:none} .g-wall li{scroll-snap-align:start;background:#fff;border:1px solid #ece0da;border-radius:18px; padding:var(--s6);display:flex;flex-direction:column} .g-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3)} .g-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center; font:16px/1 var(--display);color:#fff;background:var(--gc,#b79098)} .g-who{font-size:13px;line-height:1.35} .g-who span{display:block;font-size:11px;letter-spacing:.04em;color:var(--muted)} .g-head .g-stars{margin-left:auto;font-size:11px} .g-wall blockquote{margin:0;font-size:13.5px;line-height:1.95;color:#463a38} .g-tag{align-self:flex-start;margin-top:auto;padding-top:0;font-size:10px;letter-spacing:.12em;color:var(--accent); border:1px solid var(--soft);border-radius:99px;padding:3px 10px} .g-swipe{font-size:11px;letter-spacing:.1em;color:var(--muted);margin:0} .voice-intro{display:flex;align-items:center;gap:var(--s4);margin:var(--s16) 0 0} .voice-intro:before,.voice-intro:after{content:"";flex:1;height:1px;background:var(--line)} .voice-intro span{font-size:11px;letter-spacing:.18em;color:var(--muted)} @media(min-width:760px){ .g-wall{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;gap:var(--s6)} .g-swipe{display:none} .g-bar{padding:var(--s6) var(--s8)} } .voice-cols{display:grid;grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s12);max-height:460px;overflow:hidden; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent); mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 86%,transparent)} .voice-track{display:flex;flex-direction:column;gap:var(--s4);animation:voices-up calc(var(--dur-marquee)*0.44) linear infinite} .voice-cols:hover .voice-track,.voice-cols:focus-within .voice-track{animation-play-state:paused} @keyframes voices-up{to{transform:translateY(-50%)}} /* 好評卡＝WhatsApp／IG 對話樣（文字係真嘅原話，截圖喺燈箱度睇） */ .voice{background:#efe7dd;border:1px solid #ded3c6;border-radius:14px;padding:12px 12px 10px} .voice.ig{background:#fff;border-color:#e4ddd6} .wa-top{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:11px;letter-spacing:.04em;color:#6b6157} .wa-top b{font-weight:400;color:#453b33} .wa-top .src{margin-left:auto;font-size:10px;letter-spacing:.06em;background:#ffffffad;border-radius:99px;padding:3px 9px;color:#6b6157} .voice .who{width:26px;height:26px;border-radius:50%;background:#cdbca8;color:#fffdfa;flex-shrink:0; display:grid;place-items:center;font:12px var(--display)} .voice.ig .who{background:#c9a9ae} .bub{position:relative;max-width:93%;width:fit-content;background:#fff;border-radius:10px;padding:9px 11px 5px;margin-bottom:7px; box-shadow:0 1px 1px #00000021} .bub p{margin:0;font-size:13px;line-height:1.8;color:#20211f} .bub time{display:block;text-align:right;font-size:10px;color:#8e8e8e;margin-top:1px} .bub.out{background:#dcf8c6;margin-left:auto} .bub:after{content:"";position:absolute;top:0;width:9px;height:13px;background:inherit;box-shadow:none} .bub.in:after{left:-6px;clip-path:polygon(100% 0,100% 100%,0 0)} .bub.out:after{right:-6px;clip-path:polygon(0 0,0 100%,100% 0)} .bub+.bub:after{display:none} .voice.ig .bub{background:#efefef;border-radius:18px;box-shadow:none} .voice.ig .bub:after{display:none} .voice.ig .bub.out{background:#3797f0} .voice.ig .bub.out p{color:#fff} .voice.ig .bub time{display:none} @media(min-width:760px){.voice-cols{grid-template-columns:repeat(3,1fr)} .voice-cols>div:nth-child(n+2){display:block}} @media(max-width:759px){.voice-cols>div:nth-child(n+2){display:none}} @media (prefers-reduced-motion:reduce){.voice-track{animation:none}.voice-cols{max-height:none;mask-image:none;-webkit-mask-image:none}} /* ── 其他服務：橫向推進 ── */ .more-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,74vw);gap:var(--s4); overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline-start:var(--gutter); margin-inline:calc(var(--gutter)*-1);padding:var(--s4) var(--gutter) var(--s8);scrollbar-width:none} .more-rail::-webkit-scrollbar{display:none} .more-rail article{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column} .more-rail .shot{aspect-ratio:4/3;background:#f1e6e4;overflow:hidden; display:grid;place-items:center;font:11px var(--body);letter-spacing:.14em;color:#a08d90} .more-rail .shot img{width:100%;height:100%;object-fit:cover} .more-rail .body{padding:var(--s6);display:flex;flex-direction:column;gap:var(--s2);flex:1} .more-rail h3{font-size:var(--lg)} .more-rail p{margin:0;font-size:var(--sm);color:var(--muted)} .more-rail .text-link{margin-top:auto;align-self:flex-start} .more-rail .lead{outline:1px solid var(--accent);outline-offset:-1px} @media(min-width:760px){.more-rail{grid-auto-columns:minmax(280px,1fr)}} /* ── 燈箱內嘅前後拉桿 ── */ .lb-compare{position:relative;width:100%;max-height:65dvh;aspect-ratio:1;border-radius:12px;overflow:hidden;touch-action:pan-y;cursor:ew-resize;--lb:50%;margin-inline:auto} .lb-compare img{display:block;width:100%;height:100%;max-height:none;object-fit:cover} .lb-compare img+img{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--lb)) 0 0)} .lb-compare .bar{position:absolute;top:0;bottom:0;width:2px;left:var(--lb);background:#fffffff2;box-shadow:0 0 10px #0000004d} .lb-compare .bar:after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:38px;height:38px;border-radius:50%;background:#fff;color:var(--accent);font-size:13px;display:grid;place-items:center; box-shadow:0 4px 14px #0000003d} .lb-compare .lb-tag{position:absolute;bottom:8px;font-size:10px;letter-spacing:.14em;background:#2b2326a6;color:#fff; padding:3px 8px;border-radius:99px} .lb-compare .lb-tag.l{left:8px}.lb-compare .lb-tag.r{right:8px;background:#f0c8c8e0;color:#3a2a26} /* 章節大相：跟捲動慢慢推移，同參考站一樣「相片定住、內容行過」 */ .editorial>.scene,/* 章節大相：跟捲動慢慢推移，同參考站一樣「相片定住、內容行過」 */ .editorial>picture>.scene{will-change:transform} /* 逐格錯開入場：插畫步驟、款式卡、作品格 */ .js-motion .journey li,.js-motion .more-rail article{opacity:1} .js-motion .journey.pending li{opacity:0;transform:translateY(14px)} .js-motion .journey li{transition:opacity var(--dur-enter) var(--ease,ease),transform var(--dur-enter) var(--ease,ease)} .js-motion .journey li:nth-child(2){transition-delay:.08s} .js-motion .journey li:nth-child(3){transition-delay:.16s} .js-motion .journey li:nth-child(4){transition-delay:.24s} .js-motion .journey li:nth-child(5){transition-delay:.32s} @media (prefers-reduced-motion:reduce){} .journal-block{position:relative;isolation:isolate;overflow:hidden;background:var(--canvas)} .journal-block>.scene,.journal-block>picture>.scene{position:absolute;right:0;top:0;bottom:0;width:min(46%,600px);height:100%;object-fit:cover;object-position:46% 14%;z-index:-2; -webkit-mask-image:linear-gradient(90deg,transparent,#000 46%);mask-image:linear-gradient(90deg,transparent,#000 46%)} .journal-block:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--canvas) 34%,#f9eeefb8 62%,#f9eeef52)} @media(max-width:800px){.journal-block>.scene,.journal-block>picture>.scene{left:0;right:0;width:100%;height:auto;aspect-ratio:1;bottom:auto;object-position:50% 4%; -webkit-mask-image:linear-gradient(180deg,#000 44%,transparent 94%);mask-image:linear-gradient(180deg,#000 44%,transparent 94%)} .journal-block:after{background:linear-gradient(180deg,#f9eeef00 18%,#f9eeef8a 50%,var(--canvas) 78%)} .journal-block .journal{padding-top:clamp(200px,58vw,320px)}} /* ── Hero・desktop ── 橫幅主圖（14-portrait-with-tools-wide）左邊本身留咗空位， 所以 desktop 唔用手機嗰個毛玻璃圓罩，改成文字靠左 + 斜向暗角。 */ @media(min-width:801px){ .hero-frost{display:none} .hero-shade{inset:0;background:linear-gradient(103deg,#332b27d4,#332b27a6 30%,#332b2733 56%,transparent 72%),linear-gradient(0deg,#332b2766,transparent 40%)} .hero-content{inset:auto auto 0 0;width:min(58%,700px);text-align:left; padding:0 0 clamp(118px,17svh,178px) var(--gutter);text-shadow:0 1px 24px #2e26235c} .hero-name{font-size:clamp(44px,5vw,74px)} /* text-wrap:balance 會拆爛已經有
嘅標題（尾行剩一兩個字）*/ .hero h1{max-width:22ch;text-wrap:normal} .hero-description{margin-inline:0} .hero-services{justify-content:flex-start} } .faq-links{display:grid;gap:12px;margin-top:var(--s8)} @media(min-width:620px){.faq-links{grid-template-columns:1fr 1fr}} /* ═══ 2026-09-23 section pass ═══ */ /* 紋眉 editorial：生活感背景（手機用直版） */ .editorial>picture.scene{display:block} .editorial>picture.scene img{width:100%;height:100%;object-fit:cover;object-position:64% 40%} @media(max-width:800px){.editorial>picture.scene img{object-position:50% 18%}} .editorial .cards img{aspect-ratio:4/3;object-fit:cover} /* 眉嘅款式：Apple cards carousel */ .brow-styles{overflow:hidden} .service-intro b{font-weight:500;color:var(--accent)} .ac-rail,.sl-track{list-style:none;margin:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain} .ac-rail{padding:var(--s4) var(--gutter) var(--s6);gap:var(--s4)} .ac-rail::-webkit-scrollbar,.sl-track::-webkit-scrollbar{display:none} .ac-rail li,.sl-track li{flex:0 0 auto;scroll-snap-align:start} .ac-card{position:relative;display:block;width:clamp(250px,72vw,360px);aspect-ratio:5/7.2;border:0;padding:0;border-radius:26px; overflow:hidden;background:#e6d8d6;text-align:left;color:#fff;box-shadow:0 22px 44px -26px #4a2f3480; transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base),opacity var(--dur-fast) var(--ease)} .ac-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)} .ac-card:before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,#1c1316b0,#1c131600 40%,#1c131600 56%,#1c1316c4)} .ac-card:hover{opacity:1;transform:translateY(-6px);box-shadow:0 30px 50px -26px #4a2f3499} .ac-card:hover img{transform:scale(1.045)} .ac-card:active{transform:translateY(-2px) scale(.99)} .ac-top{position:absolute;z-index:2;left:22px;right:22px;top:22px} .ac-top small{display:block;font:10.5px var(--body);letter-spacing:.18em;opacity:.88} .ac-top b{display:block;font:400 clamp(24px,2.4vw,30px)/1.3 var(--display);margin-top:8px;letter-spacing:.06em} .ac-hl{position:absolute;z-index:2;left:22px;right:66px;bottom:22px;font-size:13.5px;line-height:1.75} .ac-plus{position:absolute;z-index:2;right:18px;bottom:18px;width:38px;height:38px;border-radius:50%;background:#fffffff2; color:var(--ink);display:grid;place-items:center;font-size:16px;transition:transform var(--dur-base)} .ac-card:hover .ac-plus{transform:rotate(90deg)} .ac-card.is-ph{background:repeating-linear-gradient(45deg,#f1e3e4 0 12px,#ead9da 12px 24px)} .ac-card.is-ph:before{background:linear-gradient(180deg,#3a2a2e99,#3a2a2e00 42%,#3a2a2e00 56%,#3a2a2e99)} .ac-ph{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;letter-spacing:.14em;color:#8b767a} .ac-foot,.sl-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s4)} .ac-foot .note,.sl-foot .note{margin:0;max-width:52ch} .ac-nav{display:flex;gap:10px;flex-shrink:0} .ac-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:16px; transition:background var(--dur-fast),color var(--dur-fast),opacity var(--dur-fast)} .ac-nav button:hover{background:var(--ink);color:var(--surface);opacity:1} .ac-nav button:disabled{opacity:.3;pointer-events:none} .brow-styles .service-end{margin-top:var(--s12)} .ac-dialog{border:0;padding:0;width:min(760px,calc(100% - 20px));max-height:92dvh;border-radius:28px;background:var(--surface); color:var(--ink);overflow:auto;opacity:0;transform:translateY(16px) scale(.97);transition:opacity var(--dur-quick) var(--ease),transform var(--dur-quick) var(--ease)} .ac-dialog.is-open{opacity:1;transform:none;transition-duration:var(--dur-fast),var(--dur-base)} .ac-dialog::backdrop{background:#281e27a8;backdrop-filter:blur(8px)} .ac-dialog .close{position:sticky;top:14px;float:right;margin:14px 14px 0 0;width:42px;height:42px;border-radius:50%;border:0; background:var(--ink);color:var(--surface);font-size:20px;z-index:3} .ac-body{padding:clamp(28px,6vw,60px)} .ac-body h3{font-size:clamp(28px,4vw,42px);margin-bottom:var(--s4);letter-spacing:.06em} .ac-body .ac-lead{font:clamp(17px,2vw,21px)/1.8 var(--display);color:var(--accent)} .ac-body p{color:var(--muted);font-size:15px} .ac-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:var(--s8) 0} .ac-pics img{border-radius:16px;height:100%;aspect-ratio:4/5;object-fit:cover} .ac-badge{background:#f3e6e7;border-radius:14px;padding:14px 18px;color:var(--ink)!important;font-size:13.5px!important} /* 紋眉旅程：真實操作片段做頭 */ .film{position:relative;height:min(78svh,720px);min-height:440px;overflow:hidden;isolation:isolate;display:grid; place-items:center;border-radius:26px;transform:scale(.95)} .film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .film:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#23191cd1,#23191c5c 55%,#23191c85)} .film-copy{text-align:center;color:#fff;padding:32px 24px 70px} .film-copy p{font:15px var(--display);letter-spacing:.12em;margin-bottom:20px} .film-copy h2{font-size:clamp(26px,3.4vw,46px)} .film-copy small{display:block;margin-top:26px;font-size:12px;opacity:.82} .film-sheet{position:relative;z-index:2;background:var(--canvas);border-radius:26px 26px 0 0;margin-top:-56px} /* 紋髮前後：可直接拉嘅 slider，多個個案 */ .sl-track{padding:var(--s4) var(--gutter) var(--s6);gap:var(--s6)} .sl-track li{width:clamp(270px,80vw,430px)} .sl-box{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;background:#ddd5d0;cursor:ew-resize;touch-action:pan-y; user-select:none;-webkit-user-select:none;--p:50%;box-shadow:0 20px 44px -28px #4a2f3499} .sl-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none} .sl-box .sl-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)} .sl-line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px #0000004d;pointer-events:none} .sl-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff; box-shadow:0 4px 16px #0000003d;display:grid;place-items:center;transition:transform var(--dur-fast) var(--ease)} .sl-knob:before{content:"‹ ›";color:var(--accent);font-size:15px} .sl-box.dragging .sl-knob,.sl-box:hover .sl-knob{transform:scale(1.1)} .sl-tag{position:absolute;bottom:12px;font-size:10px;letter-spacing:.14em;padding:4px 10px;border-radius:99px;background:#2b2326a6;color:#fff;pointer-events:none} .sl-tag.l{left:12px}.sl-tag.r{right:12px;background:#fffffff0;color:var(--ink)} .sl figcaption{margin-top:14px;font:17px var(--display);display:flex;justify-content:space-between;align-items:baseline;gap:12px} .sl figcaption span{font:12px var(--body);color:var(--muted)} .tech{margin-top:var(--section)} .tech-head{max-width:640px} .tech-head h3{font-size:clamp(24px,2.8vw,34px);margin-bottom:var(--s4)} .tech-head p{color:var(--muted);font-size:15px} .tech-steps{list-style:none;margin:var(--s12) 0 var(--s8);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s8) var(--s4)} .tech-steps img{aspect-ratio:1;object-fit:contain;margin-bottom:var(--s2);transition:transform var(--dur-enter) var(--ease)} .tech-steps li:hover img{transform:translateY(-4px) scale(1.02)} .tech-steps .no{font:italic 26px/1 Georgia,serif;color:var(--accent);display:block;margin-bottom:6px} .tech-steps h4{font:400 18px/1.4 var(--display);margin:0 0 6px} .tech-steps p{font-size:13px;line-height:1.85;color:var(--muted);margin:0} @media(min-width:760px){.tech-steps{grid-template-columns:repeat(3,1fr);gap:var(--s12) var(--s8)}.tech-steps p{font-size:14px}} /* 作品：圓形旋轉畫廊（冇 JS／減少動態 ＝ 普通格） */ .ring-sec{position:relative;background:var(--canvas)} .ring-pin{padding-block:var(--section)} .ring-head{text-align:center} .ring-head h2{margin-bottom:10px} .ring{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;padding:var(--s8) var(--gutter) 0} .ring-card{background:var(--surface);border-radius:18px;padding:10px 10px 12px;box-shadow:0 20px 40px -26px #4a2f3480} .ring-card .case-images{border-radius:12px;overflow:hidden} .ring-card .case-meta{margin:10px 2px 2px;font-size:10px} .ring-card figcaption{font-size:12.5px;padding:0 2px} .ring-note{text-align:center;margin:12px auto 0} .ring-sec.is-3d{height:300vh} .ring-sec.is-3d .ring-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column; padding:clamp(92px,13svh,130px) 0 14px} .ring-sec.is-3d .ring-stage{flex:1;min-height:0;display:grid;place-items:center;perspective:1500px;perspective-origin:50% 42%} .ring-sec.is-3d .ring{--cw:clamp(168px,44vw,272px);--r:calc(var(--cw)*2.05);display:block;padding:0;position:relative;width:var(--cw); height:calc(var(--cw)*1.22);transform-style:preserve-3d;transform:translateZ(calc(var(--r)*-1)) rotateY(var(--rot,0deg))} .ring-sec.is-3d .ring-card{position:absolute;inset:0;transform:rotateY(calc(var(--i)*360deg/var(--n))) translateZ(var(--r)); backface-visibility:hidden;-webkit-backface-visibility:hidden} @media(max-width:759px){.ring-sec.is-3d{height:250vh}} /* 好評：Google 同對話混埋一幅牆 */ .voices-note{margin-top:var(--s4)} .voice.gg{background:#fff;border-color:#eadfd9} .voice.gg .who{color:#fff} .gg-stars{margin:0 0 6px;color:#dda63f;font-size:12px;letter-spacing:.16em} .voice.gg blockquote{margin:0;font-size:13px;line-height:1.85;color:#2f2627} .gg-date{display:block;margin-top:8px;font-size:10.5px;color:var(--muted);letter-spacing:.04em} .voice-pool{display:grid;gap:var(--s4)} @media(min-width:760px){.voice-pool{grid-template-columns:repeat(3,1fr)}} /* 創辦人 ＋ 團隊 */ .team{background:#efe3e4} .founder{display:grid;grid-template-columns:1fr;gap:40px;align-items:center} .founder-photo img{aspect-ratio:4/5;object-fit:cover;border-radius:220px 220px 8px 8px; transition:clip-path var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)} .founder-name{font:400 34px/1.2 var(--display);margin:0 0 var(--s4)} .founder-name small{display:block;font:12px var(--body);letter-spacing:.12em;color:var(--muted);margin-top:8px} .crew{margin-top:var(--section)} .crew-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:var(--s6)} .crew-head .kicker{margin:0} .crew-head p{margin:0;color:var(--muted);font-size:14px} .crew-hint{display:none} .crew-list{list-style:none;margin:0;padding:0 0 8px;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .crew-list::-webkit-scrollbar{display:none} .crew-card{position:relative;flex:0 0 62vw;max-width:270px;aspect-ratio:4/5.4;border-radius:20px;overflow:hidden;scroll-snap-align:start;background:#d9d4d2} .crew-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform var(--dur-slow) var(--ease)} .crew-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#2a1d21e0,#2a1d2100 58%)} .crew-info{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;color:#fff} .crew-info b{display:block;font:400 22px/1.2 var(--display)} .crew-info span{display:block;font-size:11px;letter-spacing:.1em;opacity:.9;margin-top:2px} .crew-info small{display:inline-block;margin-top:8px;font-size:11px;padding:2px 9px;border:1px solid #ffffff80;border-radius:99px} .crew-info p{margin:8px 0 0;font-size:12px;line-height:1.7;color:#fffe} @media(min-width:900px){ .founder{grid-template-columns:.85fr 1fr;gap:88px} .crew-hint{display:inline;margin-left:10px;font-size:12px;color:var(--accent)} .crew-list{overflow:visible;height:460px} .crew-card{flex:1 1 0;max-width:none;aspect-ratio:auto;cursor:pointer} .crew-list.stagger>.crew-card{transition:opacity var(--dur-enter) var(--ease),transform var(--dur-slow) var(--ease),flex-grow var(--dur-enter) var(--ease); transition-delay:calc(var(--si,0)*90ms),calc(var(--si,0)*90ms),0s} .crew-card.is-active{flex-grow:2.4} .crew-card.is-active img{transform:scale(1.03)} .crew-info p,.crew-info small{opacity:0;transform:translateY(8px);transition:opacity var(--dur-base) .1s,transform var(--dur-base) .1s} .crew-card.is-active .crew-info p,.crew-card.is-active .crew-info small{opacity:1;transform:none} .crew-info b{font-size:26px} } /* 捲動入場：逐格錯開、相片由下揭開 */ .js-motion .stagger>*{transition:opacity var(--dur-enter) var(--ease),transform var(--dur-slow) var(--ease);transition-delay:calc(var(--si,0)*90ms)} .js-motion .stagger.pending>*{opacity:0;transform:translateY(26px)} .js-motion .founder-photo.pending img{clip-path:inset(22% 0 0 0 round 220px 220px 8px 8px);transform:scale(1.07)} .js-motion .film-copy.pending{opacity:0;transform:translateY(22px)} @media (prefers-reduced-motion:reduce){ .stagger>*{opacity:1!important;transform:none!important} .founder-photo img{clip-path:none!important;transform:none!important} .film{transform:none} } .ac-top small,.crew-info small{color:#fff} .film{height:min(66svh,620px)} @media(max-width:800px){.brow-scene:after{background:linear-gradient(180deg,#2a212499,#2a2124b8 38%,#2a2124c4 70%,#2a212499)}} /* ═══ 2026-09-23 pm ═══ */ .ac-top b i,.ac-body h3 i{display:block;font-style:normal;font-size:.5em;letter-spacing:.08em;opacity:.9;margin-top:4px} .ac-pics.one{grid-template-columns:1fr}.ac-pics.one img{aspect-ratio:4/3} /* slider：置中，左右露少少鄰居 */ .sl-track{--slw:clamp(270px,80vw,460px);padding-inline:calc((100% - var(--slw))/2);scroll-padding-inline:0} .sl-track li{width:var(--slw);scroll-snap-align:center} .sl-box.studio{aspect-ratio:1} .sl-foot{justify-content:center;flex-direction:column;text-align:center} .sl-foot .note{max-width:60ch} /* Google：放喺好評牆底，冇卡框 */ .g-live{max-width:1280px;margin:var(--s12) auto 0;padding:0 var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px} .g-live p{margin:0} .g-live .g-logo{font-size:20px} .g-num{font:400 46px/1.1 var(--display);margin-right:10px;vertical-align:middle} .g-live .g-stars{font-size:16px;vertical-align:middle} .g-sub{font-size:14px;color:var(--muted)} .g-upd{display:block;font-size:11px;margin-top:2px} .g-live a{font-size:13px;border-bottom:1px solid var(--line);margin-top:6px} /* 預約掣 */ .wa-book{gap:10px;white-space:nowrap} .wa-ico{width:20px;height:20px;flex-shrink:0} /* 作品 filter */ .ring-tabs{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:99px;background:var(--surface);margin:10px auto 8px} .ring-tabs button{min-height:40px;padding:0 24px;border:0;border-radius:99px;background:none;font-size:14px;letter-spacing:.08em;transition:background var(--dur-fast),color var(--dur-fast)} .ring-tabs button[aria-selected=true]{background:var(--ink);color:var(--surface)} .ring-card[hidden]{display:none!important} /* 創辦人：參考 Parisienne 嘅相＋側欄 */ .founder{display:block} .founder-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(18px,4vw,44px);align-items:center} .founder-photo{position:relative;margin:0 16px 20px 0} .founder-photo:before{content:"";position:absolute;inset:9% -16px -20px 12%;background:linear-gradient(180deg,#a79fa1,#8a8385)} .founder-photo img{position:relative;z-index:1;aspect-ratio:3/4;object-fit:cover;border-radius:2px} .js-motion .founder-photo.pending img{clip-path:inset(0 0 100% 0);transform:none} .founder-photo img{transition:clip-path var(--dur-slow) cubic-bezier(.65,.01,.05,.99)} .founder-of{font-size:14px;line-height:1.7;letter-spacing:.04em;margin:0 0 14px} .founder-meta .founder-name{font:400 clamp(36px,5vw,58px)/1.1 var(--display);margin:0 0 8px;letter-spacing:.02em} .founder-title{font-size:13px;color:var(--muted);margin:0 0 20px} .founder-social{display:flex;gap:10px} .founder-social a{width:54px;height:54px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background var(--dur-fast),color var(--dur-fast)} .founder-social a:hover{background:var(--ink);color:var(--surface);opacity:1} .founder-social svg{width:22px;height:22px} .founder-copy{margin-top:var(--s16);max-width:620px} .founder-copy h2{margin-bottom:var(--s8)} .founder-lines{font:clamp(15px,1.5vw,17px)/2.3 var(--display);color:var(--ink);margin-bottom:var(--s8)} @media(min-width:900px){.founder{display:grid;grid-template-columns:1.05fr 1fr;gap:88px;align-items:center}.founder-copy{margin-top:0}} /* footer：同頁面一樣底色，品牌名＝淡色大字，中線放返回頁頂 */ .fo{background:var(--canvas);border-top:1px solid var(--line);padding:clamp(48px,7vw,88px) var(--gutter) calc(28px + env(safe-area-inset-bottom))} .fo-inner{max-width:1280px;margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px} .fo-word{margin:0;white-space:nowrap;font:400 clamp(46px,12vw,168px)/1 var(--display);letter-spacing:-.02em;color:transparent; background:linear-gradient(180deg,#80575e59,#80575e1c 70%,#80575e0a);-webkit-background-clip:text;background-clip:text;user-select:none} .fo-desc{margin:0;font-size:13.5px;line-height:1.9;color:var(--muted)} .fo-social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .fo-chip{display:inline-flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border:1px solid var(--line);border-radius:99px;text-align:left; background:#fffaf866;transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)} .fo-chip:hover{background:var(--surface);border-color:var(--accent);transform:translateY(-2px);opacity:1} .fo-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--surface)} .fo-ic svg{width:17px;height:17px} .fo-chip b{display:block;font:400 14px/1.2 var(--display);letter-spacing:.06em} .fo-chip small{display:block;font-size:11px;color:var(--muted);margin-top:2px} .fo-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font-size:13px;color:var(--muted);max-width:640px} .fo-nav a:hover{color:var(--ink);opacity:1} .fo-rule{position:relative;max-width:1280px;margin:clamp(40px,6vw,64px) auto 22px;display:flex;justify-content:center} .fo-rule:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent)} .fo-top{position:relative;width:62px;height:62px;border-radius:50%;background:var(--canvas);border:1px solid var(--line);display:grid;place-items:center; align-content:center;gap:0;color:var(--ink);transition:transform var(--dur-base) var(--ease),background var(--dur-fast),color var(--dur-fast),opacity var(--dur-fast) var(--ease)} .fo-top span{font-size:18px;line-height:1}.fo-top small{font-size:9px;letter-spacing:.18em;color:inherit} .fo-top:hover{transform:translateY(-4px);background:var(--ink);color:var(--surface);opacity:1} .fo-copy{margin:0;text-align:center;font-size:11.5px;color:var(--muted)} @media(max-width:759px){.fo{padding-bottom:calc(92px + env(safe-area-inset-bottom))}} /* 右下角 WhatsApp：圓掣，撳開先出兩個選擇 */ .fab{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:40; display:flex;flex-direction:column;align-items:flex-end;gap:12px} .fab-btn{position:relative;width:60px;height:60px;border-radius:50%;border:2px solid transparent;padding:0;color:#efe6e7;display:grid;place-items:center; background:radial-gradient(circle at 34% 28%,#3d3133,#161112 72%) padding-box, conic-gradient(from var(--ga),#9d9092,#ffffff 10%,#b9aaad 22%,#4a3e40 38%,#f2e6e8 54%,#7d6e71 70%,#ffffff 84%,#9d9092) border-box; box-shadow:0 12px 28px -10px #1e1417a6,inset 0 1px 0 #ffffff24;animation:shine calc(var(--dur-float)*1.07) linear infinite;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)} .fab-btn:hover{transform:scale(1.06);opacity:1}.fab-btn:active{transform:scale(.96)} .fab-wa{width:26px;height:26px;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)} .fab-x{position:absolute;font-size:28px;line-height:1;opacity:0;transform:rotate(-90deg) scale(.97);transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)} .fab.open .fab-wa{opacity:0;transform:rotate(90deg) scale(.6)} .fab.open .fab-x{opacity:1;transform:none} .fab-menu{display:flex;flex-direction:column;align-items:flex-end;gap:8px} .fab-menu a{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:10px 20px 10px 14px;border-radius:99px;font-size:14px;letter-spacing:.04em; background:#fffaf8f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--ink); box-shadow:0 10px 26px -14px #45232a59;opacity:0;transform:translateY(14px) scale(.92);transform-origin:right bottom; transition:opacity var(--dur-fast),transform var(--dur-base) var(--ease),background var(--dur-fast);transition-delay:calc(var(--k)*55ms)} .fab-menu a:hover{background:var(--surface);opacity:1} .fab-mi{width:18px;height:18px;color:var(--accent)} .fab.open .fab-menu a{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.fab-btn{animation:none}.fab-menu a,.fab-wa,.fab-x{transition:none}} /* footer icon：線條、字少 */ .fo-word{background:linear-gradient(180deg,#80575ea8,#80575e5c 62%,#80575e2e)!important;-webkit-background-clip:text!important;background-clip:text!important} .fo-chip{padding:9px 18px 9px 14px;gap:8px;background:none} .fo-chip svg,.fo-wa svg{width:19px;height:19px} .fo-chip span{font:400 14px/1 var(--display);letter-spacing:.08em} .fo-wa{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink); transition:background var(--dur-fast),border-color var(--dur-fast),transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)} .fo-wa:hover{background:var(--surface);border-color:var(--accent);transform:translateY(-2px);opacity:1} /* 右下角掣：淺色版 */ .fab-btn{color:var(--accent); background:radial-gradient(circle at 34% 28%,#fffdfc,#f3e7e6 74%) padding-box, conic-gradient(from var(--ga),#d9c3c6,#ffffff 12%,#c7aeb2 26%,#a88a90 42%,#f6ecec 58%,#c3a8ad 72%,#ffffff 86%,#d9c3c6) border-box; box-shadow:0 12px 28px -12px #45232a59,inset 0 1px 0 #fff} .fab-wa{width:27px;height:27px}.fab-x{color:var(--accent)} /* technique：步驟切換（一張圖＋六行），取代六格 */ .ts{display:grid;grid-template-columns:1fr;gap:var(--s4);margin:var(--s8) 0} .ts-art{position:relative;aspect-ratio:1;max-width:340px;width:100%;margin:0 auto} .ts-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.97); transition:opacity var(--dur-enter) ease,transform var(--dur-enter) var(--ease)} .ts-art img.on{opacity:1;transform:none} .ts-bar{position:absolute;left:18%;right:18%;bottom:0;height:2px;background:var(--line);border-radius:2px;overflow:hidden} .ts-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)} .ts.run .ts-bar i{animation:ts-fill var(--ts-dur,5s) linear forwards} @keyframes ts-fill{to{transform:scaleX(1)}} .ts-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .ts-list li{border-bottom:1px solid var(--line)} .ts-list button{width:100%;display:flex;align-items:baseline;gap:14px;padding:13px 2px;border:0;background:none;text-align:left;color:var(--muted); transition:color var(--dur-fast)} .ts-list button:hover{color:var(--ink);opacity:1} .ts-list .no{font:italic 17px/1 Georgia,serif;color:var(--accent);min-width:26px} .ts-list b{font:400 16px/1.4 var(--display);letter-spacing:.04em} .ts-list li.on button{color:var(--ink)} .ts-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease)} .ts-body>p{overflow:hidden;margin:0;padding-left:42px;font-size:13.5px;line-height:1.85;color:var(--muted)} .ts-list li.on .ts-body{grid-template-rows:1fr} .ts-list li.on .ts-body>p{padding-bottom:14px} @media(min-width:760px){ .tech{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px);align-items:center} .tech-head{grid-column:1} .ts{grid-column:1/-1;grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px);align-items:center;margin-top:var(--s6)} .ts-art{grid-column:2;grid-row:1;max-width:420px} .ts-list{grid-column:1;grid-row:1} .tech>.text-link{grid-column:1;justify-self:start} } @media (prefers-reduced-motion:reduce){.ts-art img,.ts-body{transition:none}} .ring-tabs button{font:400 16px/1 var(--display);letter-spacing:.12em;padding:0 26px} /* 2026-09-23：desktop 款式卡置中（放得晒就置中，放唔晒照舊由左捲） */ @media (min-width:801px){.ac-rail{justify-content:safe center}} /* 2026-09-23：手機 hero 弧形推低、更透，唔好遮住模特兒個咀 */ @media(max-width:800px){ .hero-frost{inset:58% -38% -25%;background:#e7ded652} .hero-content{padding-bottom:clamp(44px,7svh,72px)} .hero-name{font-size:34px;margin-bottom:8px} .hero-sub{margin-bottom:14px} .hero-description{margin-top:10px} .hero-services{margin-top:16px} } @media(max-width:800px) and (max-height:740px){ .hero-frost{inset:53% -38% -25%} .hero-content{padding-bottom:28px} .hero-sub{margin-bottom:10px} .hero h1{font-size:22px;line-height:1.5} } /* 2026-09-23：作品改用 coverflow（Swiper，vendor/swiper），唔使再捲好多次先過到下一段 */ .work-swiper{width:100%;padding:var(--s6) 0 56px;margin-top:var(--s4)} .work-swiper .swiper-slide{width:min(300px,72vw)} .work-swiper .swiper-slide-shadow-left,.work-swiper .swiper-slide-shadow-right{border-radius:18px} .work-swiper .swiper-pagination-bullet{background:var(--ink);opacity:.25} .work-swiper .swiper-pagination-bullet-active{opacity:.85} /* ═══ 2026-09-23 夜：hero 參考 Parisienne ═══ */ /* header 喺 hero 上面透明 */ .site-header{transition:background-color var(--dur-base),border-color var(--dur-base),-webkit-backdrop-filter var(--dur-base),backdrop-filter var(--dur-base)} .site-header.over-hero{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent} .site-header.over-hero .brand-word,.site-header.over-hero .desktop-nav a{color:#fff;text-shadow:0 1px 12px #2a222440} .site-header.over-hero .brand img{filter:brightness(0) invert(1)} .site-header.over-hero .menu-button span{background:#fff} .hero-inset{display:none} @media(max-width:800px){ /* 背景：面部特寫放大；中間細圖；弧形好透、字轉白 */ .hero-back{object-position:62% 18%;transform:scale(1.18);transform-origin:62% 20%} .hero-tint{background:linear-gradient(180deg,#2a222466,transparent 20%)} .hero-inset{display:block;position:absolute;z-index:1;left:50%;top:21%;width:min(56vw,300px);aspect-ratio:3/4;margin:0;transform:translateX(-50%); overflow:hidden;box-shadow:0 30px 60px -30px #2a222499} .hero-inset img{width:100%;height:100%;object-fit:cover;object-position:50% 22%} .hero-frost{inset:55% -38% -25%;background:linear-gradient(180deg,#ffffff0d,#3a2f3029);-webkit-backdrop-filter:blur(22px) saturate(1.05);backdrop-filter:blur(22px) saturate(1.05)} .hero-shade{inset:52% 0 0;background:linear-gradient(transparent,#2a222459 60%,#2a22248c)} .hero-content,.hero-name,.hero h1,.hero-sub,.hero-description{color:#fff;text-shadow:0 1px 16px #2a222466} } @media(max-width:800px) and (max-height:740px){.hero-inset{top:19%;width:min(50vw,260px)}.hero-frost{inset:53% -38% -25%}} /* Brows／Scalp 大圖：加一層 overlay 壓低背景，白字先清楚 */ .editorial:after{background:linear-gradient(0deg,#2a2224b8,#2a222473 55%,#2a22244d),linear-gradient(90deg,#2a222480,transparent 75%);z-index:1} @media(max-width:800px){.editorial h2{max-width:20ch}} /* 預約段：背景相壓淡 */ .contact:after{background:linear-gradient(90deg,#f5eeeaf5,#f5eeeac7 50%,#f5eeea8c)} @media(max-width:800px){.contact:after{background:linear-gradient(0deg,#f9eeeffa,#f9eeefe0 45%,#f9eeef99)}} /* ═══ 2026-09-23 夜 2 ═══ */ /* 手機 hero：背景用返 hero.webp，放大到面部特寫；細圖同一張 */ @media(max-width:800px){ .hero-back{inset:auto;left:-62%;top:-6%;width:190%;height:auto;aspect-ratio:1024/1536;object-fit:cover} } /* 開頁左上角「SINCE 2018」，一捲就換返 logo */ .brand{position:relative} .brand-intro{position:absolute;left:0;top:50%;transform:translateY(-50%);font:30px/1 var(--display);letter-spacing:.06em;color:#fff; white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-base),transform var(--dur-base) var(--ease);text-shadow:0 1px 14px #2a222440} .brand-intro small{display:block;font:12px/1 var(--body);letter-spacing:.34em;margin-bottom:6px} .brand img,.brand-word{transition:opacity var(--dur-base),transform var(--dur-base) var(--ease)} .site-header.at-top.over-hero .brand-intro{opacity:1} .site-header.at-top.over-hero .brand img,.site-header.at-top.over-hero .brand-word{opacity:0;transform:translateY(-6px)} /* 操作片段：影片只鋪片段嗰格，唔好喺下面粉紅卡兩邊露出嚟 */ .film{position:relative;isolation:isolate} .film-sec{background:var(--canvas)} /* ═══ 2026-09-23 夜 3 ═══ */ /* GLOWING / SINCE 2018（跟 Parisienne「2026 RENEWAL since 2017」） */ .brand-intro{font:inherit;color:#fff} .brand-intro b{display:block;font:400 28px/1 var(--display);letter-spacing:.08em} .brand-intro small{display:block;font:400 12px/1 var(--display);letter-spacing:.2em;margin:7px 0 0;color:#fff} /* hero 細圖：縮細、擺喺品牌名上面 */ @media(max-width:800px){ .hero-back{left:-44%;top:-16%} .hero-inset{position:static;transform:none;display:block;width:min(34vw,170px);aspect-ratio:3/4;margin:0 auto 18px;box-shadow:0 22px 44px -26px #2a2224a6} .hero-inset img{object-position:50% 50%} } @media(max-width:800px) and (max-height:740px){.hero-inset{width:min(28vw,140px);margin-bottom:12px}} /* The Journal：工作室片做背景 */ .journal-block>video.scene{display:block;object-position:50% 45%} /* ═══════════ 2026-09-23 設計系統：掣 + 動畫（之後其他頁跟呢套） ═══════════ */ :root{--ease:cubic-bezier(.22,1,.36,1);--ease-spring:cubic-bezier(.34,1.45,.64,1);--dur-quick:150ms;--dur-fast:250ms;--dur-base:400ms;--dur-enter:.6s;--dur-slow:.9s;--dur-micro:var(--dur-fast);--stagger:60ms;--dur-pulse:2.4s;--dur-float:7s;--dur-marquee:50s;interpolate-size:allow-keywords} /* 掣：三款，全部流光邊框 .pill 主要（實色） —— 預約、WhatsApp .pill.light 次要（淺色） —— 了解更多、查看、地圖 .pill.glass 深色背景上用 —— 大圖段入面 加 .sm = 細碼 */ .pill.sm{min-height:42px;padding:8px 18px;gap:14px;font-size:12.5px;letter-spacing:.08em} .pill.glass.sm{background:linear-gradient(#2a222466,#2a222466) padding-box,conic-gradient(from var(--ga),#ffffff00,#e3c6c0 var(--gp),#f8eee8 calc(var(--gp)*2),#e3c6c0 calc(var(--gp)*3),#ffffff00 calc(var(--gp)*4)) border-box} .pill.is-soon{opacity:.55;pointer-events:none;animation:none} .pill.is-soon:before{display:none} .wa-open{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:7px 12px;min-height:34px; border:1px solid #cfc2b1;background:#ffffffa8;border-radius:99px;font-size:11px;letter-spacing:.06em;color:#5b5147} .wa-open:hover{background:#fff;opacity:1} @media (hover:hover){.pill:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px #56323a99}} /* 頁尾 Brows／Scalp／WhatsApp：透明底，流光只喺邊框（用遮罩，唔使白色墊底） */ .fo-chip,.fo-wa{position:relative;background:none;border:1px solid var(--line)} .fo-chip:before,.fo-wa:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--ga),#c9a9ae00,#d8c2c5 8%,#a8858c 16%,#d8c2c5 24%,#c9a9ae00 32%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:shine calc(var(--dur-float)*1.07) linear infinite} @media (hover:hover){.fo-chip:hover,.fo-wa:hover{background:none;border-color:var(--line)}} /* 動畫：入場只得兩種 —— 文字向上淡入、卡片逐格錯開；全部同一條曲線 */ .js-motion .reveal{transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease)} .js-motion .stagger>*{transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease);transition-delay:calc(var(--si,0)*var(--stagger))} .js-motion .journey li{transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease)} /* 相片 hover：輕微放大（作品、款式卡、服務卡同一個幅度） */ @media (hover:hover){.more-rail .shot img,.ac-card img,.journal-links a{transition:transform var(--dur-slow) var(--ease)} .more-rail article:hover .shot img,.ac-card:hover img{transform:scale(1.035)} .journal-links a:hover{transform:translateX(4px)}} /* Hero 開頁序列：細圖由下揭開，之後品牌名、標語、內文、掣逐行出 */ @media (prefers-reduced-motion:no-preference){ .hero-content>*{animation:hero-up 1s var(--ease) both} .hero-content>:nth-child(2){animation-delay:.15s}.hero-content>:nth-child(3){animation-delay:.25s} .hero-content>:nth-child(4){animation-delay:.35s}.hero-content>:nth-child(5){animation-delay:.45s}.hero-content>:nth-child(6){animation-delay:.55s} .hero-inset{animation:hero-unveil 1.2s var(--ease) both} .brand-intro b,.brand-intro small{animation:hero-up 1s var(--ease) .2s both}.brand-intro small{animation-delay:.35s} } @keyframes hero-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes hero-unveil{from{clip-path:inset(100% 0 0 0);opacity:.6}to{clip-path:inset(0 0 0 0);opacity:1}} @media (prefers-reduced-motion:reduce){.fo-chip:before,.fo-wa:before{animation:none}} /* 款式卡箭咀：置中；全部卡都放得晒（兩粒都撳唔到）就收埋 */ .ac-foot{justify-content:center} .ac-nav:has(.ac-prev:disabled):has(.ac-next:disabled){display:none} /* 頁尾連結撳位加大到 44px（手機） */ .fo-nav{gap:0 22px} .fo-nav a{display:inline-flex;align-items:center;min-height:44px} .g-live a{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px} /* 2026-09-24：hero 掣同下面數字帶之間留返位；預約掣唔再被兩欄格仔切走 */ @media(max-width:800px){.hero-content{padding-bottom:calc(30px + clamp(36px,6svh,56px))}} .contact-actions{display:flex;flex-wrap:wrap;gap:12px} .contact-actions .pill.wa-book{width:auto;max-width:100%;padding-inline:22px 26px;font-size:14px} /* 紋眉兩款大卡（2026-09-27：只留輕氧眉、線條眉） */ .bs-card{width:clamp(280px,80vw,430px);aspect-ratio:37/56;border-radius:22px} .bs-card .ac-top{left:26px;right:26px;top:26px} .bs-card .ac-top b{font-size:clamp(30px,3vw,40px)} .bs-body{position:absolute;z-index:2;left:26px;right:80px;bottom:26px;display:grid;gap:14px;color:#fff;text-align:left} .bs-card .ac-hl{position:static;font-size:14px;line-height:1.8} .bs-fit{display:flex;gap:10px;align-items:baseline;font-size:12.5px;border-top:1px solid #ffffff4d;padding-top:12px} .bs-fit i{font-style:normal;letter-spacing:.14em;opacity:.78;flex:none} .bs-card .ac-plus{width:46px;height:46px;right:22px;bottom:22px;font-size:18px;transition:transform var(--dur-fast) var(--ease)} .bs-card:hover .ac-plus{transform:rotate(45deg)} .bs-card:before{background:linear-gradient(180deg,#2b2024a6,#2b202400 34%,#2b202400 48%,#2b2024d9)} @media(min-width:960px){.bs-rail{justify-content:center}} /* 導覽 HAIR 下拉（2026-09-27） */ .desktop-nav{align-items:center} .nav-drop{position:relative} .nav-drop-btn{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;color:inherit;display:inline-flex;align-items:center;gap:4px;min-height:44px;cursor:pointer} .nav-drop-btn span{font-size:.75em;transition:transform var(--dur-micro,.3s)} .nav-drop-btn[aria-expanded=true] span{transform:rotate(180deg)} .site-header.over-hero .nav-drop-btn{color:#fff;text-shadow:0 1px 12px #2a222440} .nav-sub{position:absolute;left:50%;top:100%;min-width:180px;display:grid;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 40px -24px #4a2f3466;opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-quick) .25s} .nav-sub a{padding:10px 14px;border-radius:10px;color:var(--ink)!important;text-shadow:none!important;white-space:nowrap} .nav-sub a:hover,.nav-sub a[aria-current]{background:var(--canvas);opacity:1} .nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub,.nav-drop-btn[aria-expanded=true]+.nav-sub{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s} .desktop-nav>a[aria-current],.nav-drop[data-current]>.nav-drop-btn{border-bottom:1px solid currentColor} /* 手機選單項目多咗，收細少少 */ .menu-dialog nav:has(>:nth-child(8)) a{font-size:22px} .menu-dialog nav:has(>:nth-child(8)) .m-rise{padding:13px 0} .m-inner>.note a{border-bottom:1px solid currentColor;margin-right:8px} /* 關閉掣：用兩條線畫 ×，確保喺圓圈正中（2026-09-27） */ .close{position:relative;font-size:0!important;line-height:0;padding:0;color:var(--ink)} .close:before,.close:after{content:'';position:absolute;left:50%;top:50%;width:16px;height:1.5px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)} .close:after{transform:translate(-50%,-50%) rotate(-45deg)} /* 手機選單：分組（頭髮、更多服務）用 details 展開 */ .menu-dialog .m-group{overflow:hidden} .menu-dialog .m-group summary{list-style:none;cursor:pointer;font:27px/1.4 var(--display)} .menu-dialog .m-group summary::-webkit-details-marker{display:none} .menu-dialog .m-group summary .m-rise{display:flex;align-items:baseline;border-bottom:1px solid var(--line)} .menu-dialog .m-group summary small{font:12px var(--body);margin-left:20px} .menu-dialog .m-group summary i{margin-left:auto;font:18px var(--body);font-style:normal;transition:transform var(--dur-fast) var(--ease)} .menu-dialog .m-group[open] summary i{transform:rotate(45deg)} .m-sub{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;padding:10px 0 14px;border-bottom:1px solid var(--line)} .m-sub a{font:15px/1.6 var(--body)!important;padding:8px 0;color:var(--ink)} .menu-dialog nav:has(.m-group) a,.menu-dialog nav:has(.m-group) .m-group summary{font-size:22px} .menu-dialog nav:has(.m-group) .m-rise{padding:13px 0} .menu-dialog nav{max-height:calc(100dvh - 190px);overflow-y:auto;scrollbar-width:none} /* 桌面導覽：7 項，窄機收細間距 */ @media(max-width:1180px){.desktop-nav{gap:18px;font-size:12.5px}} .nav-sub{min-width:200px} .menu-dialog .m-inner nav{grid-auto-rows:max-content} .menu-dialog .m-group{overflow:visible} .menu-dialog .m-group summary{display:block} .menu-dialog .m-group summary .m-rise{width:100%} .menu-dialog .m-group summary{display:flex;line-height:0;padding:0} .menu-dialog .m-group summary .m-rise{line-height:1.4;align-items:center} /* 2026-09-27 Garrick：頁尾一行；導覽上層一律黑色，下層先用主色 */ .fo-nav{flex-wrap:nowrap;max-width:none;gap:0 24px} @media(max-width:560px){.fo-nav{gap:0 14px;font-size:12px}} .menu-dialog .m-group summary span{color:var(--ink)} .menu-dialog .m-group summary small{color:var(--muted)} .m-sub a,.nav-sub a{color:var(--accent)!important} /* 2026-09-27：旅程步驟尾嘅掣置中 */ .journey-end{display:flex;justify-content:center;margin-top:var(--s12)} /* GLOWING 閃光字（純 CSS 版 text-shimmer） */ .shimmer{--sp:34px;display:inline-block;color:transparent;background:linear-gradient(90deg,#fff0 calc(50% - var(--sp)),#fff calc(50%),#fff0 calc(50% + var(--sp))) no-repeat,linear-gradient(#ffffffbd,#ffffffbd);background-size:250% 100%,auto;-webkit-background-clip:text;background-clip:text;animation:shimmer calc(var(--dur-pulse)*1.08) linear infinite} @keyframes shimmer{from{background-position:100% center,0 0}to{background-position:0% center,0 0}} @media (prefers-reduced-motion:reduce){.shimmer{animation:none;color:#fff;background:none}} /* 2026-09-27 新 logo：玫瑰金線條；喺深色 hero 上面轉白 */ .brand img{object-fit:contain} .site-header.over-hero .brand img,.menu-dialog .brand img{filter:brightness(0) invert(1)} /* 首頁 #faq：置中、兩張卡 */ .faq-home{text-align:center} .faq-home .intro{max-width:640px;margin-inline:auto} .faq-home .intro h2{margin-bottom:var(--s6)} .faq-home .intro p{color:var(--muted)} .faq-links{max-width:880px;margin:var(--s12) auto 0} .faq-card{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:18px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:14px 22px 14px 14px;transition:border-color var(--dur-fast),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast),opacity var(--dur-fast) var(--ease)} .faq-card img{width:96px;height:96px;object-fit:contain;mix-blend-mode:multiply;background:transparent} .faq-card small{display:block;font:12px var(--display);letter-spacing:.12em;color:var(--accent)} .faq-card b{display:block;font:400 20px/1.5 var(--display)} .faq-card em{display:block;font-style:normal;font-size:13px;color:var(--muted)} .faq-card i{font-style:normal;font-size:18px;color:var(--accent)} .faq-card:hover{opacity:1;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 18px 34px -26px #56323a80} @media(max-width:620px){.faq-card{grid-template-columns:72px 1fr auto;gap:12px}.faq-card img{width:72px;height:72px}.faq-card b{font-size:17px}} /* 英文導覽較闊：細啲嘅桌面闊度收起 logo 副題 */ @media(min-width:801px) and (max-width:1120px){.site-header .brand-word small{display:none}} /* 2026-09-30 修正：燈箱前後比較，舊「兩張並排」規則將相壓成一半闊 → 右邊空白 */ .dialog-images .lb-compare{width:min(100%,65dvh);max-height:none} .dialog-images .lb-compare img{width:100%;min-width:0;max-height:none} /* ═══════════ 2026-10-01 Motion pass（參考 transitions.dev）═══════════ 1. 一條減速曲線 + 三個時長 token；開快、關更快（關閉讓路） 2. 入場：距離縮短、加 3px blur、時長 .6s、錯開 60ms 3. 頁與頁之間：cross-document View Transition（淡出 → 淡入微升） 4. 燈箱：由 .96 放大淡入 250ms，關閉 150ms 5. 手風琴
：高度用 interpolate-size 展開，內容淡入；＋號轉 45° 有過渡 6. 分頁掣：底色 pill 跟住滑（JS 加 .tab-pill） 全部有 prefers-reduced-motion 保護 */ /* 2. 入場 */ .js-motion .reveal{transition:opacity var(--dur-enter) var(--ease),transform var(--dur-enter) var(--ease),filter var(--dur-enter) var(--ease)} .js-motion .reveal.pending{transform:translateY(14px)} .js-motion .reveal.pending:not(:has(img,video,canvas)){filter:blur(3px)} .js-motion .stagger.pending>*{transform:translateY(18px)} /* 3. 頁面轉場 */ @view-transition{navigation:auto} ::view-transition-old(root){animation:vt-out var(--dur-quick) var(--ease) both} ::view-transition-new(root){animation:vt-in var(--dur-base) var(--ease) both} @keyframes vt-out{to{opacity:0}} @keyframes vt-in{from{opacity:0;transform:translateY(8px)}} /* 4. 燈箱 */ .image-dialog{opacity:0;transform:scale(.96);transition:opacity var(--dur-quick) var(--ease),transform var(--dur-quick) var(--ease)} .image-dialog.is-open{opacity:1;transform:none;transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .image-dialog::backdrop{opacity:0;transition:opacity var(--dur-quick) var(--ease)} .image-dialog.is-open::backdrop{opacity:1;transition:opacity var(--dur-fast) var(--ease)} /* 5. 手風琴 */ details::details-content{block-size:0;overflow-y:clip;transition:block-size var(--dur-fast) var(--ease),content-visibility var(--dur-fast) allow-discrete} details[open]::details-content{block-size:auto} details[open]>:not(summary){animation:dt-in var(--dur-base) var(--ease) both} @keyframes dt-in{from{opacity:0;transform:translateY(-4px);filter:blur(2px)}} summary span,summary i,summary .tog{transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} /* 6. 分頁掣滑動 pill */ .has-pill{position:relative;isolation:isolate} .has-pill>button{position:relative;z-index:1;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .has-pill>button[aria-pressed=false]:not(:hover){background-color:transparent!important} .has-pill>button[aria-pressed=false],.tabs button[aria-pressed=false],.qb-tabs button[aria-pressed=false]{transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)} .has-pill>button[aria-pressed=true]{background:transparent!important;border-color:transparent!important} .tab-pill{position:absolute;left:0;top:0;z-index:0;pointer-events:none;transition:transform var(--dur-fast) var(--ease),width var(--dur-fast) var(--ease)} .tab-pill.snap{transition:none} @media(prefers-reduced-motion:reduce){ @view-transition{navigation:none} details::details-content{transition:none} details[open]>:not(summary){animation:none} .image-dialog,.image-dialog::backdrop,.ac-dialog,.tab-pill{transition:none!important} .js-motion .reveal.pending{filter:none} } /* 全幅 scene 相有橫向桌面版時包住 （finalize_site.wide）：picture 本身唔參與排版 */ picture:has(>.scene){display:contents} /* ═══ 首頁 hero：liquid glass（2026-10-01 Garrick）═══ 清玻璃：輕 blur＋高 saturate 令後面張相透出顏色；頂部弧形高光；漸變光邊；底部微暗保住白字對比 */ .hero-frost{background:linear-gradient(180deg,#ffffff24 0%,#ffffff08 38%,#3a2f3014 70%,#2b222538 100%); -webkit-backdrop-filter:blur(12px) saturate(1.7) brightness(1.03);backdrop-filter:blur(12px) saturate(1.7) brightness(1.03); box-shadow:inset 0 1.5px 0 #ffffffb3,inset 0 0 0 1px #ffffff2e,inset 0 28px 56px -28px #ffffff8c,inset 0 -48px 90px -40px #2b22254d;isolation:isolate} .hero-frost::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(70% 34% at 28% 2%,#ffffff8c,#fff0 60%),radial-gradient(46% 22% at 82% 6%,#ffffff4d,#fff0 62%),linear-gradient(100deg,#fff0 30%,#ffffff1f 45%,#fff0 60%); mix-blend-mode:screen;animation:lg-sheen calc(var(--dur-float)*1.4) var(--ease) infinite alternate} .hero-frost::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none; background:linear-gradient(165deg,#ffffffe6,#ffffff1a 28%,#ffd9e255 55%,#ffffff12 75%,#ffffff80); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} @keyframes lg-sheen{from{background-position:0 0,0 0,-40vw 0}to{background-position:0 0,0 0,40vw 0}} .hero-services .pill.glass{background:linear-gradient(180deg,#9a6b73a6,#6e464ec7)!important;border:1px solid #ffffff59;color:#fffaf7; -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6); box-shadow:inset 0 1px 0 #ffffffa6,inset 0 -1px 0 #0000001f,inset 0 10px 18px -10px #ffffff66,0 14px 28px -16px #3c1e2899} .hero-services .pill.glass:hover{background:linear-gradient(180deg,#a8787fb3,#7a5058d1)!important} @media(prefers-reduced-motion:reduce){.hero-frost::before{animation:none}} /* nav 多咗 IMPACT（2026-10-01）：中等闊度收窄間距，品牌字唔斷行 */ .brand-word{white-space:nowrap} @media(min-width:801px) and (max-width:1099px){.desktop-nav{display:none}} @media(min-width:960px) and (max-width:1099px){.desktop-nav{gap:18px}.brand-word small{display:none}} /* 選單：行高有小數時 overflow:hidden 會切走底線（2026-10-01） */ .menu-dialog nav a{padding-bottom:1px} /* 首頁 hero 品牌字流光（2026-10-01：字體保持原樣，只加光）—— 每 3.5 秒一道玫瑰金光帶掃過（約 2 秒掃完）；純 CSS */ .hn-shine{display:inline-block;padding:0 .06em;color:transparent;text-shadow:none; background:linear-gradient(100deg,#fffaf7 0%,#fffaf7 38%,#ffe1e8 45%,#fff 50%,#f5cfd6 55%,#fffaf7 62%,#fffaf7 100%);background-size:250% 100%;background-position:120% 0; -webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 12px #2a222466); animation:hn-shine calc(var(--dur-float)*.5) cubic-bezier(.45,0,.25,1) .8s infinite} @keyframes hn-shine{0%{background-position:120% 0}55%,100%{background-position:-20% 0}} @media(prefers-reduced-motion:reduce){.hn-shine{animation:none;background-position:50% 0}} /* 2026-10-02 合拼圖燈箱：原比例直身大圖 */ .dialog-images img.is-full{max-height:72dvh;width:auto;max-width:100%} /* 2026-10-02 防盜用：iPhone 長按唔彈「儲存圖片」，桌面唔拖得走 */ img,video{-webkit-touch-callout:none;-webkit-user-drag:none;user-select:none} /* 語言切換（2026-10-03 英文版）：header 預約掣前、手機選單、頁尾 */ .lang-sw{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink);text-decoration:none;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease-spring)} .lang-sw:hover{opacity:.65} .lang-sw:active{transform:scale(.94)} .lang-sw:focus-visible,.m-lang:focus-visible,.fo-lang:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .site-header.over-hero .lang-sw{color:#fff;text-shadow:0 1px 12px #2a222440} .m-inner>.m-lang{align-self:flex-start;font-size:var(--sm);letter-spacing:.12em;color:var(--accent);text-decoration:underline;text-underline-offset:4px;padding:10px 0;transition:opacity var(--dur-base) var(--ease)} .m-inner>.m-lang:hover{opacity:.7} .fo-nav .fo-lang{font-weight:600;color:var(--ink)} .fo-nav a{white-space:nowrap} @media (max-width:760px){.fo-nav{flex-wrap:wrap;justify-content:center;gap:0 18px;max-width:420px;margin-inline:auto}} /* Lighthouse 無障礙（2026-10-03）：WhatsApp 對話時間對比度、輪播圓點觸控距離 */ .bub time{color:#6b6b6b} .swiper-pagination-bullets{--swiper-pagination-bullet-horizontal-gap:8px} @media(max-width:380px){.lang-sw{min-width:30px;padding:0 4px}.header-right{gap:8px}} /* 前後對比滑桿：iPhone 橫拉唔好俾瀏覽器當捲動（2026-10-03 實機測試） */ .sl-box{touch-action:pan-y;-webkit-user-select:none;user-select:none} .sl-box img{-webkit-user-drag:none;user-drag:none;pointer-events:none} /* 首頁好評：手機改做一行橫向，可以用手指掃（2026-10-03） */ .voice-cols.is-row{display:block;max-height:none;margin-inline:calc(var(--gutter)*-1); -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)} .voice-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px var(--gutter) 12px} .voice-scroll::-webkit-scrollbar{display:none} .voice-row{display:flex;gap:var(--s4);align-items:flex-start;width:max-content} .voice-row>.voice{flex:none;width:min(78vw,320px)} /* header：預約掣拎走咗（全站已有預約掣），語言切換做成 pill 放返嗰個位（2026-10-03 實機測試） */ .lang-sw{min-height:42px;min-width:56px;padding:0 18px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;letter-spacing:.14em;background:#fffaf866;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease-spring),background-color var(--dur-base) var(--ease)} .lang-sw:hover{opacity:1;background:var(--surface)} .site-header.over-hero .lang-sw{border-color:#ffffff8c;background:#ffffff1f} .site-header.over-hero .lang-sw:hover{background:#ffffff38} @media(max-width:380px){.lang-sw{min-width:48px;padding:0 14px}} /* 手機選單（2026-10-03 iPhone 13 Pro 實機測試）：一打開就睇得晒全部項目；分組展開會自動捲到睇晒；下面仲有嘢就淡出提示 */ .m-inner{padding:76px var(--gutter) 28px} .menu-dialog nav{max-height:none;min-height:0;flex:0 1 auto;overflow-y:auto;overscroll-behavior:contain} .menu-dialog nav:has(.m-group) a,.menu-dialog nav:has(.m-group) .m-group summary{font-size:20px} .menu-dialog nav:has(.m-group) .m-rise{padding:11px 0} .m-sub{padding:6px 0 10px} .m-sub a{padding:6px 0} .menu-dialog nav.more-below{-webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent);mask-image:linear-gradient(to bottom,#000 82%,transparent)} .m-inner>.m-lang{padding:8px 0 4px} .menu-dialog .m-group summary{min-height:0} /* 選單分組唔做高度動畫：部分瀏覽器會卡喺 0 高度，子項目溢出、捲唔到 */ .menu-dialog .m-group::details-content{transition:none} .menu-dialog .m-group[open]::details-content{block-size:auto} /* 矮身手機：拎走頂部小標題，騰位俾選單 */ @media(max-height:720px){.m-inner>.kicker{display:none}.m-inner{padding-top:72px}} .lb-compare{-webkit-user-select:none;user-select:none} .lb-compare img{pointer-events:none;-webkit-user-drag:none} /* 首頁作品輪播：橫掃交俾 Swiper；GPU 合成層令 iPhone 拖得順啲（2026-10-05） */ .work-swiper{touch-action:pan-y} .work-swiper .swiper-slide{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden} /* 首頁好評（手機，2026-10-05）：返原本直向樣式，可以用手指上下掃；捲到底會交返俾頁面 */ .voice-cols.is-vscroll{display:block;max-height:none;overflow:visible} .voice-vscroll{height:min(480px,62svh);overflow-y:auto;overscroll-behavior-y:auto;scrollbar-width:none;padding-block:28px 40px} .voice-vscroll::-webkit-scrollbar{display:none} .voice-track.static{animation:none} /* GLOWING 閃光加強（2026-10-05 實機測試話太淡）：底字暗啲、閃光帶闊啲帶暖金、經過時後面泛柔光（只動 opacity／背景位置） */ .shimmer{--sp:62px;position:relative;isolation:isolate; background:linear-gradient(90deg,#fff0 calc(50% - var(--sp)),#ffe3c8d9 calc(50% - var(--sp)*.45),#fff 50%,#ffe3c8d9 calc(50% + var(--sp)*.45),#fff0 calc(50% + var(--sp))) no-repeat,linear-gradient(#ffffff85,#ffffff85); background-size:230% 100%,auto;-webkit-background-clip:text;background-clip:text;animation:shimmer 2.8s cubic-bezier(.45,0,.25,1) infinite} .shimmer[data-t]:after{content:attr(data-t);position:absolute;inset:0;z-index:-1;color:#fff;-webkit-text-fill-color:#fff;filter:blur(9px);opacity:0;animation:glint 2.8s ease-in-out infinite} @keyframes glint{0%,20%{opacity:0}48%{opacity:.75}80%,100%{opacity:0}} @media (prefers-reduced-motion:reduce){.shimmer{animation:none;color:#fff;background:none}.shimmer[data-t]:after{animation:none;opacity:0}} /* 頁尾品牌句（2026-10-05 iPhone 13 Pro）：手機刻意分兩行，唔好喺「香港紋／眉」中間斷 */ .fo-desc .fo-zh{white-space:nowrap} @media(max-width:600px){.fo-desc .fo-dot,.fo-desc .fo-zh+br{display:none}.fo-desc .fo-zh{display:block}}